update tracks selector markup and style + tracks header style

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

@@ -91,11 +91,9 @@
   margin-right: var(--dialog-comments-w, 20rem);
 }
 .dialog__inner .tracks-header {
-  height: 3.625rem;
+  height: 3.75rem;
-  background: var(--color-white-50);
   border-radius: var(--rounded-xl);
-  padding-inline: var(--space-8);
+  padding-right: var(--space-8);
-  border: var(--border-width) solid var(--color-grey-200);
   flex-wrap: nowrap;
   gap: var(--space-8);
   position: sticky;
@@ -105,15 +103,7 @@
 .dialog__inner .tracks {
   display: flex;
   gap: var(--space-8);
-  overflow-x: auto;
+  width: 100%;
-  padding: var(--space-8) 1.5rem var(--space-8) var(--space-8);
-  margin: calc(-1 * var(--space-8));
-  -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);
 }
 /* Windows fix */
 [data-browser*='Windows'] .dialog__inner .tracks {

src/components/Selector.vue

@@ -2,7 +2,7 @@
   <div
     id="selector-dropdown"
     class="flex flex-col"
-    :style="'--image: url(\'' + current.cover + '\');'"
+    :style="'--image: url(\'' + getFrontViewUrl(current) + '\')'"
   >
     <label for="selector-select" class="text-sm">Choisir une {{ label }}</label>
     <Select
@@ -15,16 +15,11 @@
       checkmark
     >
       <template #value="slotProps">
-        <div>
+        <p>{{ current.title }}</p>
-          <img alt="" :src="getFrontViewUrl(current)" />
-          <div>{{ current.title }}</div>
-        </div>
       </template>
       <template #option="slotProps">
-        <div>
+        <img alt="" :src="getFrontViewUrl(slotProps.option)" width="28" height="28">
-          <img alt="" :src="getFrontViewUrl(slotProps.option)" />
+        <p>{{ slotProps.option.title }}</p>
-          <div>{{ slotProps.option.title }}</div>
-        </div>
       </template>
     </Select>
   </div>
@@ -62,13 +57,15 @@ function getFrontViewUrl(item) {
 
 <style>
 #selector-dropdown {
+  --selector-width: fit-content;
   --row-gap: 0;
   align-items: flex-start;
   position: relative;
   background: var(--color-background);
   border-radius: var(--rounded-lg);
   height: 3.75rem;
-  width: 20rem;
+  width: var(--selector-width, 20rem);
+  max-width: 20rem;
   padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
 }
 #selector-dropdown::before {
@@ -78,6 +75,7 @@ function getFrontViewUrl(item) {
   width: 2.75rem;
   height: 2.75rem;
   border-radius: var(--rounded-md);
+  background-color: var(--dialog-inner-background, #f7f7f7);
   background-image: var(--image);
   background-repeat: no-repeat;
   background-size: cover;
@@ -122,6 +120,11 @@ function getFrontViewUrl(item) {
 #selector-dropdown label {
   color: var(--color-grey-700);
   letter-spacing: var(--tracking-wider);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 1lh;
+  padding-right: 1em;
 }
 
 /* Options */
@@ -153,7 +156,7 @@ function getFrontViewUrl(item) {
   height: 1.75rem;
   border-radius: var(--rounded-sm);
   background-image: var(--image);
-  background-color: var(--color-grey-200);
+  background-color: var(--dialog-inner-background, #f7f7f7);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -174,4 +177,14 @@ function getFrontViewUrl(item) {
   height: 1rem;
   color: var(--color-grey-700);
 }
+#selector-select_list img {
+  position: absolute;
+  left: 0.5rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  mix-blend-mode: multiply;
+}
+#selector-select_list [aria-selected="true"] img {
+  display: none;
+}
 </style>

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

@@ -40,7 +40,7 @@
         v-if="isCompareModeEnabled && activeTracks.length < 2"
         class="track-empty | bg-white rounded-xl w-full p-32"
       >
-        <p>Cliquez sur la piste que vous souhaitez comparer</p>
+        <p>Sélectionnez sur la piste que vous souhaitez comparer</p>
       </div>
     </div>
   </div>