diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index 008daa2b5..698c24e42 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -30,7 +30,7 @@
 
 .dropdown-item {
   display: flex;
-  gap: var(--dropdown-item-gap);
+  gap: var(--dropdown-item-gap, #{$dropdown-item-gap});
   align-items: center;
   min-width: $dropdown-min-width;
   margin: 0;
diff --git a/shared/components/forms/FormElements1.astro b/shared/components/forms/FormElements1.astro
index a921d3b3b..72641aefc 100644
--- a/shared/components/forms/FormElements1.astro
+++ b/shared/components/forms/FormElements1.astro
@@ -161,7 +161,7 @@ const states = (selects as { states: { options: Record<string, { name: string; s
 
       const renderOption = (data, escape) => {
         if (data.customProperties) {
-          return `<div><span class="dropdown-item-indicator">${data.customProperties}</span>${escape(data.text)}</div>`
+          return `<div class="dropdown-item"><span class="dropdown-item-indicator">${data.customProperties}</span>${escape(data.text)}</div>`
         }
         return `<div>${escape(data.text)}</div>`
       }
diff --git a/shared/ui/Select.astro b/shared/ui/Select.astro
index d35d978c7..1c930f6cd 100644
--- a/shared/ui/Select.astro
+++ b/shared/ui/Select.astro
@@ -126,7 +126,7 @@ const selectId = id ? `select-${id}` : undefined;
 
 					const renderOption = (data, escape) => {
 						if (data.customProperties) {
-							return `<div><span class="dropdown-item-indicator">${data.customProperties}</span>${escape(data.text)}</div>`;
+							return `<div class="dropdown-item"><span class="dropdown-item-indicator">${data.customProperties}</span>${escape(data.text)}</div>`;
 						}
 						return `<div>${escape(data.text)}</div>`;
 					};