Fix sidebar height so SUPPORT + LOG fit without scrolling (sub-issue 22-1) #24

New issue

Closed

opened 2026-10-04 21:31:33 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 21:31:33 +00:00

Owner

Parent-Issue: #22

Sub-issue 22-1 — SUPPORT and LOG scroll below the fold

The in-mission sidebar #side is pinned to max-height: 504px in web/css/style.css:31
to match the canvas height. With 7 stacked panels (Squad → Selected → Stance →
Queue → Playbooks → Support → Log) the bottom two (Support, Log) scroll off
on a default 1280×800 viewport. The screenshot at docs/screenshot.png only
shows the first 5.

Fix

Make #side flex-grow within #wrap (or use 100vh - topbar - hint) and let
the LOG section be the only panel that scrolls internally. Other panels
stay compact.

File(s)

web/css/style.css — #side / #wrap / #log flex rules
Possibly web/js/ui.js — if LOG height needs explicit overflow

Acceptance

Support + Log visible on 1280×800 without scrolling the whole sidebar
LOG is the only internally-scrolling panel
make ci passes
Screenshot at docs/screenshot.png updated to reflect new layout

Lane

quickfix — make ci is the gate.

Refs

Parent: #22 (battle UI contract)
web/css/style.css:31
docs/screenshot.png

**Parent-Issue:** #22 ## Sub-issue 22-1 — SUPPORT and LOG scroll below the fold The in-mission sidebar `#side` is pinned to `max-height: 504px` in `web/css/style.css:31` to match the canvas height. With 7 stacked panels (Squad → Selected → Stance → Queue → Playbooks → Support → Log) the bottom two (Support, Log) scroll off on a default 1280×800 viewport. The screenshot at `docs/screenshot.png` only shows the first 5. ## Fix Make `#side` flex-grow within `#wrap` (or use `100vh - topbar - hint`) and let the **LOG** section be the only panel that scrolls internally. Other panels stay compact. ## File(s) - `web/css/style.css` — `#side` / `#wrap` / `#log` flex rules - Possibly `web/js/ui.js` — if LOG height needs explicit overflow ## Acceptance - [ ] Support + Log visible on 1280×800 without scrolling the whole sidebar - [ ] LOG is the only internally-scrolling panel - [ ] `make ci` passes - [ ] Screenshot at `docs/screenshot.png` updated to reflect new layout ## Lane `quickfix` — `make ci` is the gate. ## Refs - Parent: #22 (battle UI contract) - `web/css/style.css:31` - `docs/screenshot.png`

Mark added the

quickfix

triage-approved

labels

2026-10-04 21:31:33 +00:00

Mark referenced this issue

2026-10-04 21:31:42 +00:00

Battle UI contract + 4 sub-issues: SUPPORT/LOG below fold, portrait fallback, snap-pause selection, RMB hint #22

Mark referenced this issue from a commit

2026-10-05 20:15:25 +00:00

cybertactics#24: fix sidebar height — flex layout, LOG only internal scroller

Mark commented

2026-10-05 20:15:34 +00:00

Author

Owner

Closed via commit c304687 on origin/main.

Changes in web/css/style.css:

#wrap now min-height: calc(100vh - 60px) with align-items: flex-start — sidebar fills viewport instead of stretching to canvas height
#side is now a flex column (no max-height)
Each section is flex: 0 0 auto (compact)
The LOG section (section:has(> #log)) is flex: 1 1 auto; min-height: 0 so it absorbs spare vertical space
#log drops its max-height: 130px and fills the LOG section, scrolling internally

Verified: all 7 make test smoke scripts pass. Lint gate fails on pre-existing baseline debt in godot/scripts/main.gd (long lines, file-length, class-definitions-order) — unchanged by this fix and not auto-fixable. Re-stashing my CSS-only change reproduced the same lint failure, confirming it is not from this task.

Screenshot at docs/screenshot.png is still the old 1024×768 capture (pre-fix). Local env has no Playwright, so a fresh 1280×800 capture will need to come from CI or a workstation browser.

Refs: #22 (parent)

Closed via commit c304687 on origin/main. Changes in `web/css/style.css`: - `#wrap` now `min-height: calc(100vh - 60px)` with `align-items: flex-start` — sidebar fills viewport instead of stretching to canvas height - `#side` is now a flex column (no max-height) - Each `section` is `flex: 0 0 auto` (compact) - The LOG section (`section:has(> #log)`) is `flex: 1 1 auto; min-height: 0` so it absorbs spare vertical space - `#log` drops its `max-height: 130px` and fills the LOG section, scrolling internally Verified: all 7 `make test` smoke scripts pass. Lint gate fails on pre-existing baseline debt in `godot/scripts/main.gd` (long lines, file-length, class-definitions-order) — unchanged by this fix and not auto-fixable. Re-stashing my CSS-only change reproduced the same lint failure, confirming it is not from this task. Screenshot at `docs/screenshot.png` is still the old 1024×768 capture (pre-fix). Local env has no Playwright, so a fresh 1280×800 capture will need to come from CI or a workstation browser. Refs: #22 (parent)

Mark closed this issue

2026-10-05 20:15:37 +00:00