From fde363523719e5b2dc77fc07f697ee333fb2cf25 Mon Sep 17 00:00:00 2001
From: Jack251970 <1160210343@qq.com>
Date: Mon, 27 Jul 2026 12:47:46 +0800
Subject: [PATCH] fix(language-switcher): adjust styles for improved layout and
 responsiveness

---
 apps/src/components/layout/header.tsx         |  2 +-
 .../components/layout/language-switcher.tsx   | 24 ++++++++++++-------
 apps/tests/header-controls.test.mjs           |  2 +-
 apps/tests/ui-responsive-regressions.test.mjs | 11 +++++++--
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/apps/src/components/layout/header.tsx b/apps/src/components/layout/header.tsx
index d24361cb6..48e81b290 100644
--- a/apps/src/components/layout/header.tsx
+++ b/apps/src/components/layout/header.tsx
@@ -246,7 +246,7 @@ export function Header() {
           <DisclaimerTicker compact />
           <LanguageSwitcher
             compact
-            triggerClassName="w-9 min-w-9 px-0 sm:w-[106px] sm:min-w-[106px] sm:px-3"
+            triggerClassName="w-10 min-w-10 gap-1 px-0 sm:w-[124px] sm:min-w-[124px] sm:gap-2 sm:px-2.5"
           />
 
           {canLogoutWebSession ? (
diff --git a/apps/src/components/layout/language-switcher.tsx b/apps/src/components/layout/language-switcher.tsx
index ebef8b3ea..29f744181 100644
--- a/apps/src/components/layout/language-switcher.tsx
+++ b/apps/src/components/layout/language-switcher.tsx
@@ -42,22 +42,28 @@ export function LanguageSwitcher({
           className={cn("h-9 min-w-[116px] gap-2 text-xs", triggerClassName)}
           aria-label={t("选择语言")}
         >
-          <div className="flex min-w-0 items-center justify-center gap-2">
+          <div className="flex min-w-0 flex-1 items-center justify-center gap-2 overflow-hidden">
             <Globe className="h-4 w-4 shrink-0 text-muted-foreground" />
-            <span className={compact ? "hidden min-w-0 sm:inline" : "min-w-0"}>
-              <SelectValue>
+            <span
+              className={
+                compact
+                  ? "hidden min-w-0 flex-1 overflow-hidden sm:flex"
+                  : "flex min-w-0 flex-1 overflow-hidden"
+              }
+            >
+              <SelectValue className="min-w-0 truncate">
                 {(value) => getLocaleLabel(normalizeLocale(value))}
               </SelectValue>
             </span>
           </div>
         </SelectTrigger>
         <SelectContent>
-                    <SelectGroup>
-          {localeOptions.map((item) => (
-            <SelectItem key={item} value={item}>
-              {getLocaleLabel(item)}
-            </SelectItem>
-          ))}
+          <SelectGroup>
+            {localeOptions.map((item) => (
+              <SelectItem key={item} value={item}>
+                {getLocaleLabel(item)}
+              </SelectItem>
+            ))}
           </SelectGroup>
         </SelectContent>
       </Select>
diff --git a/apps/tests/header-controls.test.mjs b/apps/tests/header-controls.test.mjs
index 7a58ffc06..2677232b4 100644
--- a/apps/tests/header-controls.test.mjs
+++ b/apps/tests/header-controls.test.mjs
@@ -20,7 +20,7 @@ test("管理员仪表盘保留服务开关和语言选择", async () => {
   assert.match(source, /<Switch[\s\S]*?onCheckedChange=\{handleToggleService\}/);
   assert.match(
     source,
-    /<LanguageSwitcher[\s\S]*?compact[\s\S]*?triggerClassName="w-9 min-w-9[\s\S]*?sm:w-\[106px\]/,
+    /<LanguageSwitcher[\s\S]*?compact[\s\S]*?triggerClassName="w-10 min-w-10 gap-1 px-0[\s\S]*?sm:w-\[124px\][\s\S]*?sm:gap-2/,
   );
   assert.match(source, /<DisclaimerTicker compact \/>/);
   assert.match(source, /v\{serviceStatus\.version\}/);
diff --git a/apps/tests/ui-responsive-regressions.test.mjs b/apps/tests/ui-responsive-regressions.test.mjs
index 2019d6cc4..a5fc82719 100644
--- a/apps/tests/ui-responsive-regressions.test.mjs
+++ b/apps/tests/ui-responsive-regressions.test.mjs
@@ -23,8 +23,15 @@ test("mobile shell preserves page titles and compact controls", async () => {
   );
   assert.match(headerSource, /flex min-w-0 flex-1[\s\S]*overflow-hidden/);
   assert.match(headerSource, /truncate text-lg[\s\S]*sm:text-\[21px\]/);
-  assert.match(headerSource, /triggerClassName="w-9 min-w-9/);
-  assert.match(languageSource, /compact \? "hidden min-w-0 sm:inline"/);
+  assert.match(
+    headerSource,
+    /triggerClassName="w-10 min-w-10 gap-1 px-0[\s\S]*?sm:w-\[124px\][\s\S]*?sm:gap-2/,
+  );
+  assert.match(
+    languageSource,
+    /flex min-w-0 flex-1 items-center justify-center gap-2 overflow-hidden/,
+  );
+  assert.match(languageSource, /<SelectValue className="min-w-0 truncate">/);
   assert.match(workspaceSource, /line-clamp-2[\s\S]*sm:line-clamp-1/);
 });