From bb03657c587d8eb0fdfe4fa648937317285af42e Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Sun, 14 Jun 2026 11:25:17 +0200
Subject: [PATCH] fix: align province selector chevron

---
 components/settings/settings-page.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/components/settings/settings-page.tsx b/components/settings/settings-page.tsx
index be71adb..e99eb4e 100644
--- a/components/settings/settings-page.tsx
+++ b/components/settings/settings-page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { Bell, BellRing, Clock3, Languages, MapPinned, Palette, Settings, Smartphone, Thermometer, Wind } from "lucide-react";
+import { Bell, BellRing, ChevronDown, Clock3, Languages, MapPinned, Palette, Settings, Smartphone, Thermometer, Wind } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -455,17 +455,20 @@ export function SettingsPage() {
                 />
                 <span className="min-w-0 flex-1">
                   <span className="block font-medium">{t("settings.notifications.regionManual")}</span>
-                  <select
-                    aria-label={t("settings.notifications.regionManual")}
-                    value={manualProvince ?? selectedProvince ?? "mazowieckie"}
-                    disabled={provinceMode !== "manual"}
-                    onChange={(event) => setManualProvince(event.target.value as Province)}
-                    className="surface-control mt-2 w-full rounded-control px-3 py-2 text-sm disabled:opacity-60"
-                  >
-                    {PROVINCES.map((province) => (
-                      <option key={province} value={province}>{formatProvinceName(province, language)}</option>
-                    ))}
-                  </select>
+                  <span className="relative mt-2 block">
+                    <select
+                      aria-label={t("settings.notifications.regionManual")}
+                      value={manualProvince ?? selectedProvince ?? "mazowieckie"}
+                      disabled={provinceMode !== "manual"}
+                      onChange={(event) => setManualProvince(event.target.value as Province)}
+                      className="surface-control w-full appearance-none rounded-control py-2 pl-3 pr-9 text-sm disabled:opacity-60"
+                    >
+                      {PROVINCES.map((province) => (
+                        <option key={province} value={province}>{formatProvinceName(province, language)}</option>
+                      ))}
+                    </select>
+                    <ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted" aria-hidden="true" />
+                  </span>
                 </span>
               </label>
             </div>