fix #120 #121

src/assets/css/src/2.blocks.button.css

@@ -149,6 +149,22 @@ input[type="checkbox"]:checked + .btn--primary {
 .btn--image:active {
   color: var(--color-primary-hover);
 }
+.btn--image[data-comments]::after {
+  content: attr(data-comments) / '('attr(data-comments) ' commentaires)';
+  display: grid;
+  place-items: center;
+  background-image: var(--icon-comment-new);
+  background-size: cover;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-white);
+  font-size: var(--text-xs);
+  margin-left: .25rem;
+}
+.btn--image[data-comments="1"]::after {
+  content: attr(data-comments) / '(1 commentaire)';
+}
+
 
 @media (hover: hover) {
   .btn:hover {

src/assets/css/src/2.blocks.dialog.css

@@ -77,39 +77,27 @@
   background: var(--dialog-inner-background, #f7f7f7);
   height: 100%;
 }
-.dialog__inner > header {
+.dialog__inner .tracks-header {
   background: var(--color-white-50);
   border-radius: var(--rounded-xl);
   padding: var(--space-8);
   border: var(--border-width) solid var(--color-grey-200);
-  padding-right: 11.25rem;
   position: relative;
+  flex-wrap: nowrap;
+  gap: var(--space-8);
 }
-.dialog__inner .options-selector {
+.dialog__inner .tracks {
   display: flex;
   gap: var(--space-8);
   overflow-x: auto;
   padding: var(--space-8) 1.5rem var(--space-8) var(--space-8);
   margin: calc(-1 * var(--space-8));
-  position: relative;
+  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem);
+  mask-image:         linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem);
 }
-.dialog__inner .options-selector > *:last-child {
+.dialog__inner .tracks > *:last-child {
   margin-right: 1rem;
 }
-.dialog__inner .options-selector + button {
-  position: absolute;
-  right: var(--space-8);
-}
-.dialog__inner .options-selector + button::before {
-  content: "";
-  display: block;
-  position: absolute;
-  left: calc(-3rem - 1px);
-  top: -1px;
-  bottom: -1px;
-  width: 3rem;
-  background: linear-gradient(to right, transparent, #fbfbfb);
-}
 .dialog [data-pc-section="content"] [role="tablist"] {
   height: 3.5rem;
   width: 100%;

src/components/project/virtual-sample/DynamicView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dialog__inner">
-    <header class="flex">
-      <div class="options-selector">
+    <header class="tracks-header | flex">
+      <div class="tracks">
         <button
           v-for="(track, index) in tracks"
           class="btn btn--image"