Skip to content

fix: make language switcher reachable in mobile menu#41

Merged
bitwalt merged 1 commit into
mainfrom
fix/mobile-language-switcher
May 16, 2026
Merged

fix: make language switcher reachable in mobile menu#41
bitwalt merged 1 commit into
mainfrom
fix/mobile-language-switcher

Conversation

@bitwalt
Copy link
Copy Markdown
Collaborator

@bitwalt bitwalt commented May 16, 2026

Summary

On mobile, the language switcher could not be used: the full-screen nav menu (position: fixed) was trapped by div.animate-fadeIn, which keeps a transform after its intro animation and so becomes the containing block for fixed descendants. The menu was sized to the whole document (~8000px) instead of the viewport, could not scroll, and the language dropdown fell off-screen.

  • Navbar: portal the mobile menu to document.body so fixed resolves against the viewport; add an explicit h-[calc(100dvh-4rem)].
  • LanguageSwitcher: scroll the dropdown into view when it opens.

Test plan

  • Mobile viewport (375×812): menu opens at top:64, height = viewport − navbar, scrolls correctly
  • Language dropdown opens fully on-screen; all 7 languages selectable; switching works
  • Desktop nav unaffected

🤖 Generated with Claude Code

The mobile nav menu is `position: fixed`, but `div.animate-fadeIn` (wraps
the whole app) keeps a `transform` after its intro animation, making it
the containing block for fixed descendants. The menu was therefore sized
to the full document instead of the viewport — it could not scroll, so
the language switcher and its dropdown fell off-screen.

- Navbar: portal the mobile menu to `document.body` so `fixed` resolves
  against the viewport; give it an explicit `h-[calc(100dvh-4rem)]`.
- LanguageSwitcher: scroll the dropdown into view when it opens so its
  options are visible inside the scrollable mobile menu.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown
Contributor

cloudflare-workers-and-pages Bot commented May 16, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
website 6e2aa62 Commit Preview URL

Branch Preview URL
May 16 2026, 02:44 PM

@bitwalt bitwalt merged commit 928a081 into main May 16, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant