feat(website): fit the language menu on narrow screens

The menu's list opened leftward past the screen edge on phones, and at
320px the fourth header button overlapped the brand. Open the list to the
right below 640px, and hide the GitHub star count below 360px when a page
has a language menu.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Kaoru0822andClaude Opus 5.5 committed 2026-10-11 07:31:28 +00:00
1 parent ce58aebc0e
commit 4db6ff461f
1 file changed
+10
+10
View File
@@ -2650,6 +2650,10 @@ main:not(.container) > .translation-notice {
margin-inline: auto;
}
@media (max-width: 640px) {
.language-list {
right: auto;
left: 0;
}
.language-current {
position: absolute;
width: 1px;
@@ -2662,3 +2666,9 @@ main:not(.container) > .translation-notice {
width: calc(100% - 2.5rem);
}
}
/* The language menu adds a fourth header button; make room beside the brand. */
@media (max-width: 359px) {
.header-social:has(.language-menu) .nav-github-count {
display: none;
}
}