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;