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>