Skip to content

fix: keep header nav on one line on mobile #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wavekat-eason merged 1 commit into from
Jul 5, 2026
Merged

fix: keep header nav on one line on mobile #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/LanguageSwitcher.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading