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

fix: stop language picker shrinking in flex header
All checks were successful
Deploy Staging (terry-wallet-login) / deploy (push) Successful in 1m5s
Details

Browse Source 
After dropping the fixed width, the language pill still got truncated because its flex parent could shrink it below content size. Add `shrink-0` to the wrapper and switch the trigger button from `w-full` to `w-auto` with `whitespace-nowrap`, so the button always sizes to fit the longest label like "Bahasa Indonesia".
This commit is contained in:
TerryM
2026-06-05 21:39:05 +08:00
parent b38b28f175
commit e80330b13c
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/PublicLayout.tsx
View File

@@ -152,7 +152,7 @@ function LanguageDropdown({
<button <button
type="button" type="button"
onClick={() => setOpen((value) => !value)} onClick={() => setOpen((value) => !value)}
className="flex h-full w-full items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2 text-sm text-neutral-200 shadow-inner outline-none transition hover:border-ark-gold/50 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg" className="flex h-full w-auto items-center gap-2 whitespace-nowrap rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2 text-sm text-neutral-200 shadow-inner outline-none transition hover:border-ark-gold/50 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
aria-label={ariaLabel} aria-label={ariaLabel}
aria-haspopup="listbox" aria-haspopup="listbox"
aria-expanded={open} aria-expanded={open}
@@ -698,7 +698,7 @@ export function PublicLayout() {
lang={lang} lang={lang}
setLang={changeLang} setLang={changeLang}
ariaLabel={t("langLabel")} ariaLabel={t("langLabel")}
className="hidden h-10 md:block" className="hidden h-10 shrink-0 md:block"
/> />
<Link <Link
to={lp("/favorites")} to={lp("/favorites")}