terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show full language name in the picker

Browse Source 
The desktop language pill had a fixed width (md:w-36 lg:w-40) that truncated long labels like "Bahasa Indonesia". Drop the fixed width so the button sizes to content, remove the truncate on the label, and let the dropdown menu match parent width with a sensible min-width. Same `truncate` was hiding the full label inside the mobile drawer dropdown — bumped its width to fit too.
This commit is contained in:
TerryM
2026-06-05 21:31:43 +08:00
parent ec8ef5b774
commit b38b28f175
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/layouts/PublicLayout.tsx
View File

@@ -158,7 +158,7 @@ function LanguageDropdown({
aria-expanded={open}
>
<FlagIcon code={lang} className="h-5 w-5" />
<span className="min-w-0 flex-1 truncate text-left">
<span className="whitespace-nowrap text-left">
{selected?.label ?? lang}
</span>
<ChevronDown
@@ -172,7 +172,7 @@ function LanguageDropdown({
{open ? (
<div
className={`${dropdownAnimationClass} absolute left-0 right-0 top-[calc(100%+0.5rem)] z-50 overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl`}
className={`${dropdownAnimationClass} absolute left-0 top-[calc(100%+0.5rem)] z-50 min-w-full overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl`}
role="listbox"
aria-label={ariaLabel}
>
@@ -195,7 +195,9 @@ function LanguageDropdown({
}`}
>
<FlagIcon code={option.code} className="h-5 w-5" />
<span className="truncate font-medium">{option.label}</span>
<span className="whitespace-nowrap font-medium">
{option.label}
</span>
</button>
);
})}
@@ -259,7 +261,7 @@ function MobileLanguageButton({
{open ? (
<div
className={`${dropdownAnimationClass} absolute right-0 top-[calc(100%+0.5rem)] z-50 w-44 overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl`}
className={`${dropdownAnimationClass} absolute right-0 top-[calc(100%+0.5rem)] z-50 w-max min-w-[12rem] overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl`}
role="listbox"
aria-label={ariaLabel}
>
@@ -282,7 +284,9 @@ function MobileLanguageButton({
}`}
>
<FlagIcon code={option.code} className="h-5 w-5" />
<span className="truncate font-medium">{option.label}</span>
<span className="whitespace-nowrap font-medium">
{option.label}
</span>
</button>
);
})}
@@ -694,7 +698,7 @@ export function PublicLayout() {
lang={lang}
setLang={changeLang}
ariaLabel={t("langLabel")}
className="hidden h-10 w-36 md:block lg:w-40"
className="hidden h-10 md:block"
/>
<Link
to={lp("/favorites")}