Skip to content

fix(desktop): sidebar sections never overlap — two-mode CSS scroll + collapse/cap groups#43147

Merged
OutThisLife merged 6 commits into
mainfrom
bb/sidebar-section-overlap-short-height
Jun 10, 2026
Merged

fix(desktop): sidebar sections never overlap — two-mode CSS scroll + collapse/cap groups#43147
OutThisLife merged 6 commits into
mainfrom
bb/sidebar-section-overlap-short-height

Conversation

@OutThisLife

@OutThisLife OutThisLife commented Jun 9, 2026

Copy link
Copy Markdown
Collaborator

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.

  • Tall (>768px): every section is its own capped, independently-scrollable box; Sessions is the one flex-1 scroller that soaks up leftover height.
  • Compact (≤768px, the compact height 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 now shrink-0, so nothing is ever squeezed below its content — it can't overlap in either mode. Sessions keeps its virtualized scroller in compact mode only when it's the long list (≥25 rows), so windowing still works.

Also

  • Non-session groups collapse by default. Messaging platforms start collapsed; the ids you expand persist per-platform in localStorage ($sidebarMessagingOpenIds). Cron was already collapsed-by-default.
  • Compact by default. Messaging + cron render 3 rows up front and reveal 10 more on demand (NON_SESSION_INITIAL_ROWS / NON_SESSION_LOAD_STEP). Pinned is left uncapped on count (user-curated) but gets its own capped scroller.
  • Extracted the shared SidebarLoadMoreRow (was duplicated).

Implementation notes

  • Single tunable knob: @custom-variant compact (@media (max-height: 768px)) in styles.css.
  • COMPACT_FLAT drops the caps + internal overflow in compact mode; GROUP_BODY is the shared non-session scroll body.

Test plan

  • Tall window: each of Pinned / Telegram / Discord / Cron scrolls in its own box; Sessions scrolls as the main list.
  • Compact window (<768px): one scrollbar for the whole sidebar; no header overlap.
  • Messaging/cron collapsed on first load; expanding a platform persists across reload.
  • Expanded group shows 3 rows + "Load N more" (+10 per click).
  • npm run type-check + prettier clean.

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.
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

🔎 Lint report: bb/sidebar-section-overlap-short-height vs origin/main

ruff

Total: 0 on HEAD, 0 on base (➖ 0)

🆕 New issues: none

✅ Fixed issues: none

Unchanged: 0 pre-existing issues carried over.

ty (type checker)

Total: 10620 on HEAD, 10620 on base (➖ 0)

🆕 New issues: none

✅ Fixed issues: none

Unchanged: 5564 pre-existing issues carried over.

Diagnostics are surfaced as warnings — this check never fails the build.

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.
@OutThisLife OutThisLife changed the title fix(desktop): sidebar sections overlap at short window heights fix(desktop): sidebar section headers overlap at short window heights Jun 9, 2026
@alt-glitch alt-glitch added type/bug Something isn't working P3 Low — cosmetic, nice to have labels Jun 9, 2026
@alt-glitch

Copy link
Copy Markdown
Collaborator

Note: this targets the same bug (#42987) as open PR #42988, which uses a simpler min-height approach on the recents section. Maintainers will want to pick one. Cross-linking for visibility.

…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.
@OutThisLife OutThisLife changed the title fix(desktop): sidebar section headers overlap at short window heights fix(desktop): sidebar sections never overlap — two-mode CSS scroll + collapse/cap groups Jun 10, 2026
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.
@OutThisLife OutThisLife enabled auto-merge (squash) June 10, 2026 01:09
@OutThisLife OutThisLife merged commit 8bb6529 into main Jun 10, 2026
20 checks passed
@OutThisLife OutThisLife deleted the bb/sidebar-section-overlap-short-height branch June 10, 2026 01:11
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

P3 Low — cosmetic, nice to have type/bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants