From 4db6ff461f06fa45ceecafbf2f5fb79e0e357111 Mon Sep 17 00:00:00 2001 From: Kaoru0822 <208281322+kaoru0822-kitauji@users.noreply.github.com> Date: Sun, 11 Oct 2026 07:31:28 +0000 Subject: [PATCH] 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 --- website/public/assets/styles.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/website/public/assets/styles.css b/website/public/assets/styles.css index cd03ad3a4f..0a6432014a 100644 --- a/website/public/assets/styles.css +++ b/website/public/assets/styles.css @@ -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; + } +}