Unify language and manufacturer selector controls

public/index.html

@@ -56,14 +56,17 @@
           <span>No picture</span>
         </div>
 
+        <div class="select-control">
           <select class="input-like" id="languageSelect" aria-label="Language">
             <option value="">Select language</option>
           </select>
+          <span class="select-chevron" aria-hidden="true"></span>
+        </div>
 
         <div class="manufacturer-picker" id="manufacturerPicker">
           <button class="manufacturer-trigger" id="manufacturerTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
             <span id="manufacturerValue">Select manufacturer</span>
-            <span class="picker-chevron" aria-hidden="true">⌄</span>
+            <span class="select-chevron picker-chevron" aria-hidden="true"></span>
           </button>
           <div class="manufacturer-menu" id="manufacturerMenu" hidden>
             <input class="manufacturer-search" id="manufacturerSearch" type="search" placeholder="Search manufacturer..." aria-label="Search manufacturer" />

src/tailwind.css

@@ -58,8 +58,7 @@
   .sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
   .sidebar-section { @apply border-t border-slate-700 pt-1; }
   .drawer-trigger { @apply flex min-h-8 w-full items-center gap-2 rounded border border-slate-700 bg-slate-800 px-2 text-left text-[11px] font-semibold text-slate-100 transition hover:border-slate-500 hover:bg-slate-700; }
-  .drawer-trigger .drawer-chevron,
-  .picker-chevron { @apply inline-flex h-2 w-2 border-b-2 border-r-2 text-[0px] leading-none; }
+  .drawer-trigger .drawer-chevron { @apply inline-flex h-2 w-2 border-b-2 border-r-2 text-[0px] leading-none; }
   .drawer-trigger .drawer-chevron { @apply ml-auto rotate-45 text-slate-300; }
   .drawer-trigger[aria-expanded="true"] .drawer-chevron { @apply rotate-[225deg]; }
   .parser-drawer[hidden] { display: none; }
@@ -86,13 +85,16 @@
   .arrow-button:hover:not(:disabled), .action-button:hover:not(:disabled) { @apply border-slate-500 bg-slate-700 text-white; }
   .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; }
+  .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-select { @apply hidden; }
   .manufacturer-picker { @apply relative; }
   .manufacturer-trigger { @apply flex h-7 w-full items-center justify-between rounded border border-slate-700 bg-slate-800 px-2 text-[11px] text-slate-200 shadow-sm; }
   .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; }
   .manufacturer-trigger span:first-child { @apply min-w-0 truncate; }
-  .picker-chevron { @apply ml-2 rotate-45 text-slate-200; }
+  .manufacturer-trigger .select-chevron { @apply static ml-2 translate-y-0; }
   .manufacturer-menu { @apply absolute left-0 right-0 top-full z-50 mt-1 rounded border border-slate-300 bg-white p-1 shadow-xl; }
   .manufacturer-menu[hidden] { display: none; }
   .manufacturer-search { @apply mb-1 h-7 w-full rounded border border-slate-300 px-2 text-[11px] text-slate-800 outline-none focus:border-catalog-focus focus:ring-2 focus:ring-catalog-focus/25; }
@@ -238,7 +240,7 @@
   html:not(.dark) .column-header { @apply border-slate-300 bg-slate-100 text-slate-700; }
   html:not(.dark) .sidebar-drawer-title { @apply text-slate-700; }
   html:not(.dark) .drawer-trigger .drawer-chevron,
-  html:not(.dark) .picker-chevron { @apply text-slate-700; }
+  html:not(.dark) .select-chevron { @apply text-slate-700; }
   html:not(.dark) .sidebar-close-button,
   html:not(.dark) .sidebar-open-button,
   html:not(.dark) .drawer-trigger,