From c00c605dd7ea374fe40b31804926147614b54630 Mon Sep 17 00:00:00 2001 From: 3dtours Date: Thu, 17 Sep 2026 17:50:50 +0700 Subject: [PATCH] Fix header popover hanging off-screen on narrow viewports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The header wraps under 860px, so a menu-wrap can land at the start of a row. `.popover` is right-anchored to its button, so the theme/language/account menu rendered at x=-280 of a 390px screen — half of it off the left edge and its buttons unclickable. Anchor the popover to the full-width header on narrow screens instead. Measured at 390x844 before/after: popover x=-280 → x=56, w=326, fully inside. --- docker/frontend/src/styles/app.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css index a11e328..dec69d3 100644 --- a/docker/frontend/src/styles/app.css +++ b/docker/frontend/src/styles/app.css @@ -192,6 +192,13 @@ input[type="range"] { width: 100%; accent-color: var(--accent); } /* --- responsive --------------------------------------------------------- */ @media (max-width: 860px) { .workspace { flex-direction: column; } + /* The header wraps on narrow screens, so a menu-wrap can land at the start of + a row — the popover is right-anchored to its button and would hang off the + left of the screen (measured: x=-280 of 390px). Anchor it to the full-width + header instead. */ + .header { position: relative; } + .menu-wrap { position: static; } + .popover { right: 8px; max-width: calc(100vw - 16px); } .rail { order: 2; width: auto;