fix: align language dropdown button

This commit is contained in:
zv
2026-06-14 11:21:29 +02:00
parent 3820e01be6
commit 1cd0491e6e

View File

@@ -36,18 +36,20 @@ export function LanguageToggle() {
return (
<div ref={rootRef} className="relative inline-flex">
<Languages className="pointer-events-none absolute left-3.5 size-4 text-accent" />
<button
type="button"
aria-label={t("language.label")}
aria-expanded={open}
aria-haspopup="listbox"
onClick={() => setOpen((current) => !current)}
className="surface-control flex h-11 min-w-36 items-center rounded-control py-2 pl-10 pr-10 text-left text-sm font-medium text-foreground transition hover:bg-surface-raised/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
className="surface-control flex h-11 min-w-36 items-center justify-between gap-3 rounded-control px-3.5 py-2 text-left text-sm font-medium text-foreground transition hover:bg-surface-raised/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
>
{labels[language]}
<span className="flex min-w-0 items-center gap-2.5">
<Languages className="size-4 shrink-0 text-accent" aria-hidden="true" />
<span className="truncate">{labels[language]}</span>
</span>
<ChevronDown className="size-4 shrink-0 text-muted" aria-hidden="true" />
</button>
<ChevronDown className="pointer-events-none absolute right-3.5 size-4 text-muted" />
{open && (
<div
role="listbox"