Sologretto/itsgoin
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): wrap #visibility-row and cap select width to prevent My Posts horizontal overflow

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
Scott Reimers 2026-05-14 21:42:54 -06:00
parent ec393c7f85
commit f714a17385
1 changed files with 2 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/style.css
View file

@ -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; } .identicon { display: inline-block; vertical-align: middle; flex-shrink: 0; border-radius: 2px; }
/* Visibility selector */ /* 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, #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:focus, #circle-select:focus { outline: none; border-color: #7fdbca; }
#visibility-select option, #circle-select option { background: #fff; color: #000; } #visibility-select option, #circle-select option { background: #fff; color: #000; }