Two layout issues:
1. Gap above content: .main-panel had padding: 0.25em which created
a visible gap above views. Removed — views control their own
internal padding.
2. Scroll cutoff at bottom: .main-panel > * had height: 100% but
no box-sizing: border-box. Views with their own padding (like
config-page) overflowed because padding added to the 100% height.
Added box-sizing: border-box to the global rule so padding is
included in the height calculation.
display:none discards scrollTop in WebKitGTK, so navigating away
from album/artist/genre grids and back reset scroll to top.
Replace inline style.display toggling with a CSS class that uses
visibility:hidden + height:0 + overflow:hidden. This collapses
the element visually while keeping the DOM alive with its scroll
state intact. contain:strict on hidden views ensures zero layout
cost while collapsed.
contain:strict includes size containment which caused a timing issue
where the flex-based main-panel height wasn't resolved before the
virtualizer measured its container, resulting in track-list rendering
at ~20% height on first load until something triggered a relayout.
- contain: layout style on .content-area to isolate main+queue from header/sidebar
- contain: strict on .main-panel for maximum layout isolation
- contain: layout style paint on .main-panel > * for paint containment per view
- contain: layout style paint on sidebar to isolate from main panel
- contain: layout style on .bottom-bar to isolate footer from content reflows
yonlu
logan