diff --git a/src/components/Header.astro b/src/components/Header.astro
index 0ac3dad..f8655e5 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -18,13 +18,17 @@ const homeHref = localizedPath('/', lang);
 const localeHref = (path: string) =>
   localesForPath(path).includes(lang) ? localizedPath(path, lang) : path;
 
+// `whitespace-nowrap` keeps each label on one line — without it the flex row
+// squeezes the pills on a narrow (mobile) viewport and CJK labels (语音, 简体中文)
+// break between characters, since CJK text has no word boundaries. The header
+// wraps the nav group to its own line instead (flex-wrap below).
 const pillClass = (isActive: boolean) =>
   isActive
-    ? 'text-xs font-bold rounded px-3 py-1 text-gray-700 dark:text-gray-200 border border-gray-400 dark:border-white/30 transition-colors'
-    : 'text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors border border-gray-200 dark:border-white/10 rounded px-3 py-1';
+    ? 'text-xs font-bold rounded px-3 py-1 whitespace-nowrap text-gray-700 dark:text-gray-200 border border-gray-400 dark:border-white/30 transition-colors'
+    : 'text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors border border-gray-200 dark:border-white/10 rounded px-3 py-1 whitespace-nowrap';
 ---
 
-<header class="flex items-center justify-between mb-12">
+<header class="flex flex-wrap items-center justify-between gap-y-3 mb-12">
   <a href={homeHref} class="block">
     <img src="/logos/wavekat-tight-light.svg" alt="wavekat" width="125" height="36" class="h-9 dark:hidden" />
     <img src="/logos/wavekat-tight-dark.svg" alt="wavekat" width="125" height="36" class="h-9 hidden dark:block" />
diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro
index 3f89ad9..cf5eb67 100644
--- a/src/components/LanguageSwitcher.astro
+++ b/src/components/LanguageSwitcher.astro
@@ -23,7 +23,7 @@ const label = t(lang).switcherLabel;
       aria-expanded="false"
       aria-label={label}
       data-lang-trigger
-      class="flex items-center gap-1.5 rounded border border-gray-200 px-2.5 py-1 text-xs text-gray-500 transition-colors hover:text-gray-700 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-200"
+      class="flex items-center gap-1.5 whitespace-nowrap rounded border border-gray-200 px-2.5 py-1 text-xs text-gray-500 transition-colors hover:text-gray-700 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-200"
     >
       <Globe class="h-3.5 w-3.5" />
       <span>{current}</span>