fix(desktop): sidebar sections never overlap — two-mode CSS scroll + collapse/cap groups (#43147)
* fix(desktop): prevent sidebar section overlap Use a shared sidebar section scroller only on short windows so sections do not overlap, while preserving per-section scrolling on taller layouts. * fix(desktop): measure section stack for compact sidebar mode Window-height media query kept big windows in compact mode whenever the OS chrome ate into 830px; observe the section stack element instead so compact only engages when the stack is actually short. * refactor(desktop): drive sidebar compact mode with CSS, not JS Replace the matchMedia hook with a `short` (max-height: 830px) Tailwind variant so the per-section scrollers flatten into one shared scroll stack on short windows purely in CSS. Taller windows keep their per-group scrollers and recents virtualization unchanged. * refactor(desktop): pure-CSS two-mode sidebar scroll + collapse/cap groups Drop the JS-measured compaction in favour of a single `compact` height variant (max-height: 768px): - tall: every section is its own capped, independent scroller; Sessions is the lone flex-1 scroller. - short: sections flatten and the stack scrolls as one. Every section is now `shrink-0`, so nothing is squeezed below its content and bled onto a sibling — the root cause of the header overlap (flexbox implied min-size). Sessions keeps its virtualized scroller in short mode only when it's the long list. Non-session groups (messaging, cron) collapse by default — expanded ids persist per platform — and render 3 rows, revealing 10 more on demand. Extract the shared SidebarLoadMoreRow. Stress harness seeds 50 recents to mirror the real first page. * chore(desktop): trim sidebar comments, unify "compact" naming Self-review polish: condense the over-long mode comments, use "compact" consistently (matching the variant) instead of mixing "short", and drop a no-op useCallback around revealMoreMessaging. * chore(desktop): drop dev sidebar stress harness from the PR Remove stress-probe.ts and its main.tsx import — it was a throwaway testing aid, not something to ship.
This commit is contained in:
@@ -5,6 +5,10 @@
|
||||
@import '@vscode/codicons/dist/codicon.css';
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Sidebar sections: tall viewports give each its own scroller; compact ones
|
||||
(this variant) flatten everything into one shared scroll. See ChatSidebar. */
|
||||
@custom-variant compact (@media (max-height: 768px));
|
||||
|
||||
@font-face {
|
||||
font-family: 'Collapse';
|
||||
font-style: normal;
|
||||
@@ -266,10 +270,12 @@
|
||||
--dt-user-bubble: var(--ui-chat-bubble-background);
|
||||
--dt-user-bubble-border: var(--ui-stroke-tertiary);
|
||||
|
||||
--dt-font-sans: 'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
|
||||
--dt-font-mono: 'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace,
|
||||
--dt-font-sans:
|
||||
'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
|
||||
--dt-font-mono:
|
||||
'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
|
||||
--dt-base-size: 1rem;
|
||||
--dt-line-height: 1.5;
|
||||
--dt-letter-spacing: 0;
|
||||
@@ -914,7 +920,11 @@ canvas {
|
||||
|
||||
display: block;
|
||||
inline-size: var(--fit-available-space);
|
||||
font-size: clamp(var(--fit-min, 1em), 1em * var(--fit-ratio), var(--fit-max, infinity * 1px) - var(--fit-support-sentinel));
|
||||
font-size: clamp(
|
||||
var(--fit-min, 1em),
|
||||
1em * var(--fit-ratio),
|
||||
var(--fit-max, infinity * 1px) - var(--fit-support-sentinel)
|
||||
);
|
||||
}
|
||||
|
||||
@container (inline-size > 0) {
|
||||
|
||||
Reference in New Issue
Block a user