fix: align province selector chevron

This commit is contained in:
zv
2026-06-14 11:25:17 +02:00
parent 1cd0491e6e
commit bb03657c58

View File

@@ -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>
<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 mt-2 w-full rounded-control px-3 py-2 text-sm disabled:opacity-60"
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>