Align selector icons with centered labels

public/app.js

@@ -8,6 +8,7 @@ const manufacturerSearch = document.querySelector("#manufacturerSearch");
 const manufacturerOptions = document.querySelector("#manufacturerOptions");
 const manufacturerValue = document.querySelector("#manufacturerValue");
 const languageSelect = document.querySelector("#languageSelect");
+const languageValue = document.querySelector("#languageValue");
 const recordIdElement = document.querySelector("#recordId");
 const loadProductButton = document.querySelector("#loadProductButton");
 const previousProductButton = document.querySelector("#previousProductButton");
@@ -143,6 +144,7 @@ renderTableHeader();
 setTableWidth();
 await loadManufacturers();
 await loadLanguages();
+languageSelect.addEventListener("change", syncLanguagePickerLabel);
 manufacturerSelect.addEventListener("change", () => {
     syncManufacturerPickerLabel();
     closeManufacturerPicker();
@@ -366,6 +368,11 @@ async function loadLanguages() {
     catch (error) {
         languageSelect.append(createOption("", error.message || "Local DB is not configured."));
     }
+    syncLanguagePickerLabel();
+}
+function syncLanguagePickerLabel() {
+    const option = languageSelect.selectedOptions[0];
+    languageValue.textContent = option?.textContent || "Select language";
 }
 async function loadMappingSources() {
     const manufacturerId = manufacturerSelect.value;

public/app.ts

@@ -8,6 +8,7 @@ const manufacturerSearch = document.querySelector("#manufacturerSearch");
 const manufacturerOptions = document.querySelector("#manufacturerOptions");
 const manufacturerValue = document.querySelector("#manufacturerValue");
 const languageSelect = document.querySelector("#languageSelect");
+const languageValue = document.querySelector("#languageValue");
 const recordIdElement = document.querySelector("#recordId");
 const loadProductButton = document.querySelector("#loadProductButton");
 const previousProductButton = document.querySelector("#previousProductButton");
@@ -149,6 +150,7 @@ renderTableHeader();
 setTableWidth();
 await loadManufacturers();
 await loadLanguages();
+languageSelect.addEventListener("change", syncLanguagePickerLabel);
 
 manufacturerSelect.addEventListener("change", () => {
   syncManufacturerPickerLabel();
@@ -384,6 +386,12 @@ async function loadLanguages() {
   } catch (error) {
     languageSelect.append(createOption("", error.message || "Local DB is not configured."));
   }
+  syncLanguagePickerLabel();
+}
+
+function syncLanguagePickerLabel() {
+  const option = languageSelect.selectedOptions[0];
+  languageValue.textContent = option?.textContent || "Select language";
 }
 
 async function loadMappingSources() {

public/index.html

@@ -57,8 +57,11 @@
         </div>
 
         <div class="select-control">
-          <svg class="sidebar-icon select-icon" aria-hidden="true"><use href="/icons.svg#globe"></use></svg>
-          <select class="input-like" id="languageSelect" aria-label="Language">
+          <div class="select-display" aria-hidden="true">
+            <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#globe"></use></svg>
+            <span id="languageValue">Select language</span>
+          </div>
+          <select class="input-like language-native-select" id="languageSelect" aria-label="Language">
             <option value="">Select language</option>
           </select>
           <span class="select-chevron" aria-hidden="true"></span>
@@ -66,7 +69,7 @@
 
         <div class="manufacturer-picker" id="manufacturerPicker">
           <button class="manufacturer-trigger" id="manufacturerTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
-            <svg class="sidebar-icon select-icon" aria-hidden="true"><use href="/icons.svg#tag"></use></svg>
+            <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#tag"></use></svg>
             <span id="manufacturerValue">Select manufacturer</span>
             <span class="select-chevron picker-chevron" aria-hidden="true"></span>
           </button>

src/tailwind.css

@@ -90,14 +90,15 @@
   .arrow-button:disabled, .action-button:disabled { @apply cursor-not-allowed opacity-50; }
   .input-like { @apply h-7 px-1 text-[11px]; }
   .select-control { @apply relative w-full; }
-  .select-control .input-like { @apply appearance-none pr-7 pl-9 text-center; }
-  .select-icon { @apply pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-slate-300; }
+  .select-display { @apply pointer-events-none absolute inset-0 z-10 flex items-center justify-center gap-1.5 text-center text-slate-200; }
+  .select-display span { @apply min-w-0 max-w-[calc(100%-3rem)] truncate; }
+  .language-native-select { @apply relative z-20 cursor-pointer appearance-none bg-transparent pr-7 pl-7 text-transparent caret-transparent; }
+  .language-native-select:focus { @apply text-transparent; }
   .select-chevron { @apply pointer-events-none absolute right-3 top-1/2 h-2 w-2 -translate-y-1/2 rotate-45 border-b-2 border-r-2 text-slate-200; }
   .native-manufacturer-host { @apply hidden; }
   .native-manufacturer-select { @apply hidden; }
   .manufacturer-picker { @apply relative; }
-  .manufacturer-trigger { @apply relative flex h-7 w-full items-center justify-center rounded border border-slate-700 bg-slate-800 px-9 text-center text-[11px] text-slate-200 shadow-sm; }
-  .manufacturer-trigger .select-icon { @apply left-3; }
+  .manufacturer-trigger { @apply relative flex h-7 w-full items-center justify-center gap-1.5 rounded border border-slate-700 bg-slate-800 px-9 text-center text-[11px] text-slate-200 shadow-sm; }
   .manufacturer-trigger > span:not(.select-chevron) { @apply min-w-0 truncate text-center; }
   .manufacturer-trigger:hover { @apply border-slate-500 bg-slate-700; }
   .manufacturer-trigger[aria-expanded="true"] { @apply border-catalog-focus ring-2 ring-catalog-focus/25; }
@@ -248,7 +249,8 @@
   html:not(.dark) .sidebar-drawer-title { @apply text-slate-700; }
   html:not(.dark) .drawer-trigger .drawer-chevron,
   html:not(.dark) .select-chevron,
-  html:not(.dark) .select-icon { @apply text-slate-700; }
+  html:not(.dark) .select-display,
+  html:not(.dark) .manufacturer-trigger .sidebar-icon { @apply text-slate-700; }
   html:not(.dark) .sidebar-close-button,
   html:not(.dark) .sidebar-open-button,
   html:not(.dark) .drawer-trigger,