Right panel overflows past the bottom #61

New issue

Closed

opened 2026-04-06 17:55:15 +00:00 by maxtkc · 0 comments

maxtkc commented

2026-04-06 17:55:15 +00:00

Owner

Summary

The right panel overflows the viewport by ~30px. There are two layered causes:

Primary (grid item overflow): .right-panel is a CSS Grid item in grid-rows-[auto_1fr]. Grid items default to min-height: auto, which lets them grow past the 1fr track height when content is tall — even with overflow-hidden. Fix: add min-h-0 to .right-panel.
Secondary (DaisyUI v5 tab height): DaisyUI v5's .tab-content already has a built-in height: calc(100% - var(--tab-height) + var(--border)). It expects the .tabs parent to have a definite height. The current markup adds h-full to each .tab-content, which overrides DaisyUI's calculation. And .tabs has no min-h-0, so as a flex item it can grow past the available space. Fix: add min-h-0 to .tabs (so it has a definite, bounded height), and remove h-full from each .tab-content.

Relevant context:

Layout: src/index.html:38 — .app-container is h-screen grid grid-cols-[1fr_650px] grid-rows-[auto_1fr]
Right panel: src/index.html:377 — .right-panel bg-base-200 border-l border-base-300 flex flex-col overflow-hidden
Tabs wrapper: src/index.html:380 — .tabs tabs-bordered flex-1 overflow-hidden
Tab content (×4): lines 391, 472, 518, 532 — .tab-content h-full overflow-y-auto bg-base-100 border-base-300 p-0
DaisyUI v5 source: node_modules/daisyui/components/tab.css — .tab-content has built-in height: calc(100% - var(--tab-height) + var(--border)); .tabs is display: flex; flex-wrap: wrap; height: var(--tabs-height) where --tabs-height: auto

Phase 1 — Fix right panel height overflow

In src/index.html:377, add min-h-0 to .right-panel: class="right-panel bg-base-200 border-l border-base-300 flex flex-col overflow-hidden min-h-0"
In src/index.html:380, add min-h-0 to .tabs: class="tabs tabs-bordered flex-1 min-h-0 overflow-hidden"
On all four .tab-content divs (lines 391, 472, 518, 532), remove h-full — DaisyUI v5 computes this via calc(100% - var(--tab-height)) internally. Keep overflow-y-auto.
Manually verify: right panel bottom aligns with viewport edge, tab content scrolls correctly, no visual regressions on any of the four tabs.

Gotcha: The h-full inside tab-content children (e.g. #browse-list-view, #file-list-view at lines 394, 475) also use h-full — these refer to the tab-content's height, which is now DaisyUI-managed. These should still resolve correctly since DaisyUI's height is definite. Watch for any of those inner divs disappearing (zero height) — if so, they may need h-full replaced with flex-1 in a flex column context.

Original Issue

It's strange, just by about 30 pixels but it's annoying

## Summary The right panel overflows the viewport by ~30px. There are two layered causes: 1. **Primary (grid item overflow):** `.right-panel` is a CSS Grid item in `grid-rows-[auto_1fr]`. Grid items default to `min-height: auto`, which lets them grow past the `1fr` track height when content is tall — even with `overflow-hidden`. Fix: add `min-h-0` to `.right-panel`. 2. **Secondary (DaisyUI v5 tab height):** DaisyUI v5's `.tab-content` already has a built-in `height: calc(100% - var(--tab-height) + var(--border))`. It expects the `.tabs` parent to have a definite height. The current markup adds `h-full` to each `.tab-content`, which overrides DaisyUI's calculation. And `.tabs` has no `min-h-0`, so as a flex item it can grow past the available space. Fix: add `min-h-0` to `.tabs` (so it has a definite, bounded height), and remove `h-full` from each `.tab-content`. **Relevant context:** - Layout: `src/index.html:38` — `.app-container` is `h-screen grid grid-cols-[1fr_650px] grid-rows-[auto_1fr]` - Right panel: `src/index.html:377` — `.right-panel bg-base-200 border-l border-base-300 flex flex-col overflow-hidden` - Tabs wrapper: `src/index.html:380` — `.tabs tabs-bordered flex-1 overflow-hidden` - Tab content (×4): lines 391, 472, 518, 532 — `.tab-content h-full overflow-y-auto bg-base-100 border-base-300 p-0` - DaisyUI v5 source: `node_modules/daisyui/components/tab.css` — `.tab-content` has built-in `height: calc(100% - var(--tab-height) + var(--border))`; `.tabs` is `display: flex; flex-wrap: wrap; height: var(--tabs-height)` where `--tabs-height: auto` --- ## Phase 1 — Fix right panel height overflow - [x] In `src/index.html:377`, add `min-h-0` to `.right-panel`: `class="right-panel bg-base-200 border-l border-base-300 flex flex-col overflow-hidden min-h-0"` - [x] In `src/index.html:380`, add `min-h-0` to `.tabs`: `class="tabs tabs-bordered flex-1 min-h-0 overflow-hidden"` - [x] On all four `.tab-content` divs (lines 391, 472, 518, 532), remove `h-full` — DaisyUI v5 computes this via `calc(100% - var(--tab-height))` internally. Keep `overflow-y-auto`. - [x] Manually verify: right panel bottom aligns with viewport edge, tab content scrolls correctly, no visual regressions on any of the four tabs. **Gotcha:** The `h-full` inside tab-content children (e.g. `#browse-list-view`, `#file-list-view` at lines 394, 475) also use `h-full` — these refer to the tab-content's height, which is now DaisyUI-managed. These should still resolve correctly since DaisyUI's height is definite. Watch for any of those inner divs disappearing (zero height) — if so, they may need `h-full` replaced with `flex-1` in a flex column context. --- ## Original Issue It's strange, just by about 30 pixels but it's annoying