fix: align province selector chevron
This commit is contained in:
@@ -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>
|
||||||
|
<span className="relative mt-2 block">
|
||||||
<select
|
<select
|
||||||
aria-label={t("settings.notifications.regionManual")}
|
aria-label={t("settings.notifications.regionManual")}
|
||||||
value={manualProvince ?? selectedProvince ?? "mazowieckie"}
|
value={manualProvince ?? selectedProvince ?? "mazowieckie"}
|
||||||
disabled={provinceMode !== "manual"}
|
disabled={provinceMode !== "manual"}
|
||||||
onChange={(event) => setManualProvince(event.target.value as Province)}
|
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) => (
|
{PROVINCES.map((province) => (
|
||||||
<option key={province} value={province}>{formatProvinceName(province, language)}</option>
|
<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>
|
||||||
|
|||||||
Reference in New Issue
Block a user