From 95121ffe97e10a74149f6a192ec42dfe2a081c60 Mon Sep 17 00:00:00 2001 From: bowenliang123 Date: Wed, 16 Sep 2026 21:08:07 +0800 Subject: [PATCH] fix(client): keep the insights columns' scrollbars clear of the cards 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. --- src/client/styles/overview.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/client/styles/overview.css b/src/client/styles/overview.css index 8a7e4a0..73acdd3 100644 --- a/src/client/styles/overview.css +++ b/src/client/styles/overview.css @@ -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