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"; "use client";
import { useEffect, useMemo, useState } from "react"; 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 type { LucideIcon } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card"; import { Card } from "@/components/ui/card";
@@ -455,17 +455,20 @@ export function SettingsPage() {
/> />
<span className="min-w-0 flex-1"> <span className="min-w-0 flex-1">
<span className="block font-medium">{t("settings.notifications.regionManual")}</span> <span className="block font-medium">{t("settings.notifications.regionManual")}</span>
<select <span className="relative mt-2 block">
aria-label={t("settings.notifications.regionManual")} <select
value={manualProvince ?? selectedProvince ?? "mazowieckie"} aria-label={t("settings.notifications.regionManual")}
disabled={provinceMode !== "manual"} value={manualProvince ?? selectedProvince ?? "mazowieckie"}
onChange={(event) => setManualProvince(event.target.value as Province)} disabled={provinceMode !== "manual"}
className="surface-control mt-2 w-full rounded-control px-3 py-2 text-sm disabled:opacity-60" 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> {PROVINCES.map((province) => (
))} <option key={province} value={province}>{formatProvinceName(province, language)}</option>
</select> ))}
</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> </span>
</label> </label>
</div> </div>