From f714a1738535d5152075e019c60fe7a1d065f460 Mon Sep 17 00:00:00 2001 From: Scott Reimers Date: Thu, 14 May 2026 21:42:54 -0600 Subject: [PATCH] fix(ui): wrap #visibility-row and cap select width to prevent My Posts horizontal overflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Symptom (mobile): on the My Posts tab the fixed header + bottom tabs disappeared until a swipe gesture pulled them in — classic mobile- browser-chrome auto-hide that fires when the body has unwanted horizontal scroll. Root cause: the new FoF compose option "Body+Comments: FoF only (Mode 1)" pushed the unwrapped #visibility-row (5 dropdowns side by side, no flex-wrap) past viewport width on phones. Body picked up overflow-x → mobile browser detected horizontal scroll → fixed positioning behavior gets weird in that mode on Chrome Android and WebView. Two-line fix: - flex-wrap: wrap on #visibility-row so the row breaks to multiple lines on narrow screens. - max-width: 100% on the row and on the selects inside it; the SELECT widget renders at most container-width even if its longest option is wider, so the long FoF option no longer balloons the widget. Verified by inspection: no other view has a similar wide-dropdown row that hugs the right edge; this is My Posts-specific because compose lives there. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/style.css b/frontend/style.css index d282bb2..4ecbcfd 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -224,7 +224,8 @@ header h1 { font-size: clamp(1.4rem, 2.5vw, 2rem); color: #7fdbca; margin: 0; } .identicon { display: inline-block; vertical-align: middle; flex-shrink: 0; border-radius: 2px; } /* Visibility selector */ -#visibility-row { display: flex; gap: 0.4rem; margin-top: 0.35rem; align-items: center; } +#visibility-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; align-items: center; max-width: 100%; } +#visibility-row select { max-width: 100%; } #visibility-select, #circle-select { background: #1a1a2e; border: 1px solid #444; border-radius: 3px; padding: 0.2rem 0.4rem; font-size: 0.75rem; font-family: inherit; -webkit-appearance: none; appearance: none; } #visibility-select:focus, #circle-select:focus { outline: none; border-color: #7fdbca; } #visibility-select option, #circle-select option { background: #fff; color: #000; }