From 6d5899a6c7b15417a5dff6af3ed4af31e9ae2d63 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 7 Oct 2025 15:41:48 +0200
Subject: [PATCH] fix #175

---
 src/components/Selector.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index 353c174..32521cb 100644
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     class="selector-dropdown | flex flex-col"
-    :style="'--image: url(\'' + getFrontViewUrl(currentValue) + '\')'"
+    :class="{ 'has-image': getFrontViewUrl(currentValue) }"
+    :style="setImage()"
   >
     <label for="selector-select" class="text-sm">{{ label }}</label>
 
@@ -228,6 +229,12 @@ function getFrontViewUrl(item) {
     return item.files && item.files[0] ? item.files[0].url : '';
   }
 }
+
+function setImage() {
+  return getFrontViewUrl(currentValue.value) 
+    ? '--image: url(\'' + getFrontViewUrl(currentValue.value) + '\')' 
+    : undefined;
+}
 </script>
 
 <style>
@@ -240,9 +247,13 @@ function getFrontViewUrl(item) {
   border-radius: var(--rounded-lg);
   height: 3.75rem;
   min-width: var(--selector-width, 21rem);
-  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
+  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-16);
 }
-.selector-dropdown::before {
+.selector-dropdown.has-image,
+.selector-dropdown.has-image :is(#selector-select, #selector-multiselect, [role='combobox']) {
+  padding-left: var(--space-64);
+}
+.selector-dropdown.has-image:before {
   content: '';
   position: absolute;
   left: var(--space-8);
@@ -275,7 +286,7 @@ function getFrontViewUrl(item) {
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  padding: 1.875rem var(--space-48) var(--space-8) var(--space-64);
+  padding: 1.875rem var(--space-48) var(--space-8) var(--space-16);
   cursor: pointer;
 }
 [role='combobox'] p,