okooooooo/dsh-context
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(client): keep the insights columns' scrollbars clear of the cards

Browse Source 
The sessions/KPI columns' own 8px bar rendered flush against the card
edges, riding on them while scrolling, and a column gaining or losing
the bar reflowed its content by the bar's width. Reserve the track
(scrollbar-gutter: stable) and pad the columns so the thumb stays 8px
clear of the cards; the folded single-column layout resets the padding.
This commit is contained in:
bowenliang123 committed 2026-09-16 21:08:07 +08:00
1 parent 67f956b920
commit 95121ffe97
1 file changed
+7 -3
Download Patch File Download Diff File Expand all files Collapse all files
src/client/styles/overview.css
+7 -3
View File
@@ -44,13 +44,17 @@
full-width column and the whole card scrolls in normal flow (no capped
inner scrollers to overlap). ---- */
.lc-ov-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 10px; }
.lc-ov-left { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.lc-ov-right { min-height: 0; overflow-y: auto; }
/* Each column owns its scrollbar (the harness 8px bar): `scrollbar-gutter:
stable` holds the bar's track so cards never reflow by its width when a
column gains or loses it, and the right padding keeps the thumb clear of
the card edges instead of riding on them. */
.lc-ov-left { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: 8px; display: flex; flex-direction: column; gap: 10px; }
.lc-ov-right { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: 8px; }
@container lc-ov (max-width: 932px) {
.lc-ov-card { overflow-y: auto; }
.lc-ov-body { display: block; }
.lc-ov-left { margin-bottom: 12px; }
.lc-ov-left, .lc-ov-right { overflow: visible; min-height: auto; }
.lc-ov-left, .lc-ov-right { overflow: visible; min-height: auto; padding-right: 0; }
.lc-ov-heat-card { flex: none; }
}
/* border-box keeps the card tracks true outer widths: under the harness's