fix(desktop): sidebar sections never overlap — two-mode CSS scroll + collapse/cap groups#43147
Merged
Merged
Conversation
Use a shared sidebar section scroller only on short windows so sections do not overlap, while preserving per-section scrolling on taller layouts.
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.
Contributor
🔎 Lint report:
|
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.
Collaborator
…oups 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.
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.
Remove stress-probe.ts and its main.tsx import — it was a throwaway testing aid, not something to ship.
wachoo
pushed a commit
to wachoo/hermes-agent
that referenced
this pull request
Jun 10, 2026
…collapse/cap groups (NousResearch#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.
ValentinSergief
pushed a commit
to ValentinSergief/hermes-agent
that referenced
this pull request
Jun 10, 2026
… prevent zoom-position bug Brooklyn's sidebar rework (NousResearch#42537/NousResearch#43147) moved the cron jobs section inside a flex-1 overflow-y-auto div, causing it to jump position on zoom. Moved it outside the scrollable container (inside a Fragment) so it stays fixed between sessions and profiles regardless of viewport size.
ValentinSergief
pushed a commit
to ValentinSergief/hermes-agent
that referenced
this pull request
Jun 10, 2026
…pacing Cron jobs section was moved inside the scrollable sessions container by the sidebar rework (NousResearch#42537/NousResearch#43147), causing zoom-dependent position shifts. Moved it back outside into a Fragment sibling and capped content height to max-h-28 (~4 rows) for a compact strip. Also balanced sidebar spacing: reduced nav row bottom padding and adjusted search field margins so the search bar is visually centered between the navigation row and PINNED section header. 3 files, 11 insertions, 7 deletions.
ValentinSergief
pushed a commit
to ValentinSergief/hermes-agent
that referenced
this pull request
Jun 10, 2026
…pacing Cron jobs section was moved inside the scrollable sessions container by the sidebar rework (NousResearch#42537/NousResearch#43147), causing zoom-dependent position shifts. Moved it back outside into a Fragment sibling and capped content height to max-h-28 (~4 rows) for a compact strip. Also balanced sidebar spacing: reduced nav row bottom padding and adjusted search field margins so the search bar is visually centered between the navigation row and PINNED section header. 3 files, 11 insertions, 7 deletions.
changman
pushed a commit
to changman/hermes-agent
that referenced
this pull request
Jun 10, 2026
…collapse/cap groups (NousResearch#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.
alt-glitch
pushed a commit
that referenced
this pull request
Jun 14, 2026
…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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The chat sidebar's section stack (
Pinned/Sessions/ messaging platforms /Cron) overlapped its headers under height pressure and fought over scroll. This reworks it into two pure-CSS modes with no JS measurement.Sessionsis the oneflex-1scroller that soaks up leftover height.compactheight variant): sections flatten and the whole stack scrolls as a single scrollbar.The overlap was the classic flexbox implied-min-size trap: a section given
shrink+min-height: 0(without being its own scroll container) spills its content onto the next section. Every section is nowshrink-0, so nothing is ever squeezed below its content — it can't overlap in either mode.Sessionskeeps its virtualized scroller in compact mode only when it's the long list (≥25 rows), so windowing still works.Also
localStorage($sidebarMessagingOpenIds). Cron was already collapsed-by-default.NON_SESSION_INITIAL_ROWS/NON_SESSION_LOAD_STEP). Pinned is left uncapped on count (user-curated) but gets its own capped scroller.SidebarLoadMoreRow(was duplicated).Implementation notes
@custom-variant compact (@media (max-height: 768px))instyles.css.COMPACT_FLATdrops the caps + internal overflow in compact mode;GROUP_BODYis the shared non-session scroll body.Test plan
npm run type-check+ prettier clean.