From b38b28f175f7c1a6917c35e8453c30cd43eb3c03 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 5 Jun 2026 21:31:43 +0800
Subject: [PATCH] fix: show full language name in the picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/layouts/PublicLayout.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 9a0b2fe..5ca46e9 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -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")}