fix(amicode): sessions flyout — 'Show all' scrolls, nothing overlaps; panel matches the defaults capsule by kateebonner · Pull Request #25 · harmoniqs/opencode

kateebonner · 2026-07-15T05:49:43Z

Bug

Pressing Show all (64) in the sessions dropdown made the panel unusable: content painted on top of itself and nothing scrolled.

Root cause (verified in a headless-Chromium repro of the exact DOM/CSS)

The flyout is an auto-height column flex container capped only by max-height. When the expanded list blows past that cap, two things go wrong at once:

Every flex child was allowed to shrink (min-h-0 on the project column, default shrink on the search). The project column got squeezed to 44px while its content stayed 221px tall — with overflow: visible, those project rows painted straight over the search box and session rows. That's the overlap.
ScrollView can't work here. Its viewport needs height: 100%, and percentage heights never resolve under a max-height-only auto-height ancestor chain — the viewport inflated to full content height (measured clientHeight == scrollHeight == 2851px) and the overflow: hidden root simply clipped it. Wheel events moved nothing. The outer flyout didn't scroll either, because its children had "shrunk to fit".

Fix (commit 1)

Project column and search keep natural height (shrink-0); the column self-caps at 38vh and scrolls internally if a pathological project count ever exceeds it.
The sessions list is now its own scroll container — used flex size + overflow-y: auto, no percentage heights involved. Same pattern this file already uses for the multi-server project list and the search-results panel.

Measured after (same harness): list scrolls a 326px window over 2851px of content, wheel scrolls, zero overlap, collapsed state pixel-identical.

Styling (commit 2)

Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears the defaults-capsule popover's surface — bg-base, the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics, and the "Projects" label matches the popover's section-label spec (0.08em tracking).

Verification

tsgo -b (packages/app typecheck): clean
oxlint on home.tsx: 0 errors, 18 warnings — identical count on the base branch, zero new
Headless-browser layout measurements + screenshots for collapsed / expanded / mid-scroll states

🤖 Generated with Claude Code

… list scrolls Expanding to all sessions blew past the flyout's max-height, and every flex child was allowed to shrink: the project column got squeezed far below its content (which then painted over the search box and session rows), and ScrollView's height:100% viewport can't resolve under the flyout's max-height-only auto-height chain — it inflated to full content height and was clipped, so nothing scrolled (headless repro: viewport clientHeight == scrollHeight == 2851px, wheel moved nothing). Fix: project column and search keep natural height (shrink-0; the column caps at 38vh and scrolls internally if projects ever exceed it), and the sessions list is its own scroll container via used flex size + overflow-y — the same pattern as the multi-server project list and the search results panel. Measured after: list scrolls 298px over 2851px of content, zero overlap, collapsed state pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…tyling Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears amicode-defaults-pop's surface — bg-base (was layer-01), the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics like the capsule, and the compact "Projects" label matches the popover's section-label spec (0.08em tracking). Width and max-height stay flyout-specific; the session list needs the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…psule system Kate: the flyout's spacing read as off next to the model+solver popover. Measured both panels live (CDP, computed styles): the shells matched (14px pad / 12px gap) but the flyout's inner components carried legacy insets that fought the panel padding — left edges landed at 30px (search: ml-4/mr-2 width hack), 20px (project header: pl-1.5 + an mt-2 whose compact 'mt-0' override lost the class-order battle and never applied), and 14px (list), three different alignments in one panel. Now every row sits flush at the panel's 14px inset, matching the capsule: - search box: w-full, no side margins - project header: compact mode genuinely drops mt-2 AND pl-1.5 (conditional base classes instead of the losing classList override) - project column rhythm: gap-3 in the flyout (panel rhythm), gap-4 on home - session list: mt-3 dropped — the inner pt-3 already provides the 12px Verified by re-measuring the live panels after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kateebonner · 2026-07-15T05:49:43Z

Bug

Pressing Show all (64) in the sessions dropdown made the panel unusable: content painted on top of itself and nothing scrolled.

Root cause (verified in a headless-Chromium repro of the exact DOM/CSS)

The flyout is an auto-height column flex container capped only by max-height. When the expanded list blows past that cap, two things go wrong at once:

Every flex child was allowed to shrink (min-h-0 on the project column, default shrink on the search). The project column got squeezed to 44px while its content stayed 221px tall — with overflow: visible, those project rows painted straight over the search box and session rows. That's the overlap.
ScrollView can't work here. Its viewport needs height: 100%, and percentage heights never resolve under a max-height-only auto-height ancestor chain — the viewport inflated to full content height (measured clientHeight == scrollHeight == 2851px) and the overflow: hidden root simply clipped it. Wheel events moved nothing. The outer flyout didn't scroll either, because its children had "shrunk to fit".

Fix (commit 1)

Project column and search keep natural height (shrink-0); the column self-caps at 38vh and scrolls internally if a pathological project count ever exceeds it.
The sessions list is now its own scroll container — used flex size + overflow-y: auto, no percentage heights involved. Same pattern this file already uses for the multi-server project list and the search-results panel.

Measured after (same harness): list scrolls a 326px window over 2851px of content, wheel scrolls, zero overlap, collapsed state pixel-identical.

Styling (commit 2)

Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears the defaults-capsule popover's surface — bg-base, the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics, and the "Projects" label matches the popover's section-label spec (0.08em tracking).

Verification

tsgo -b (packages/app typecheck): clean
oxlint on home.tsx: 0 errors, 18 warnings — identical count on the base branch, zero new
Headless-browser layout measurements + screenshots for collapsed / expanded / mid-scroll states

🤖 Generated with Claude Code

… list scrolls Expanding to all sessions blew past the flyout's max-height, and every flex child was allowed to shrink: the project column got squeezed far below its content (which then painted over the search box and session rows), and ScrollView's height:100% viewport can't resolve under the flyout's max-height-only auto-height chain — it inflated to full content height and was clipped, so nothing scrolled (headless repro: viewport clientHeight == scrollHeight == 2851px, wheel moved nothing). Fix: project column and search keep natural height (shrink-0; the column caps at 38vh and scrolls internally if projects ever exceed it), and the sessions list is its own scroll container via used flex size + overflow-y — the same pattern as the multi-server project list and the search results panel. Measured after: list scrolls 298px over 2851px of content, zero overlap, collapsed state pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…tyling Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears amicode-defaults-pop's surface — bg-base (was layer-01), the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics like the capsule, and the compact "Projects" label matches the popover's section-label spec (0.08em tracking). Width and max-height stay flyout-specific; the session list needs the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…psule system Kate: the flyout's spacing read as off next to the model+solver popover. Measured both panels live (CDP, computed styles): the shells matched (14px pad / 12px gap) but the flyout's inner components carried legacy insets that fought the panel padding — left edges landed at 30px (search: ml-4/mr-2 width hack), 20px (project header: pl-1.5 + an mt-2 whose compact 'mt-0' override lost the class-order battle and never applied), and 14px (list), three different alignments in one panel. Now every row sits flush at the panel's 14px inset, matching the capsule: - search box: w-full, no side margins - project header: compact mode genuinely drops mt-2 AND pl-1.5 (conditional base classes instead of the losing classList override) - project column rhythm: gap-3 in the flyout (panel rhythm), gap-4 on home - session list: mt-3 dropped — the inner pt-3 already provides the 12px Verified by re-measuring the live panels after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kateebonner · 2026-07-15T05:49:43Z

Bug

Pressing Show all (64) in the sessions dropdown made the panel unusable: content painted on top of itself and nothing scrolled.

Root cause (verified in a headless-Chromium repro of the exact DOM/CSS)

The flyout is an auto-height column flex container capped only by max-height. When the expanded list blows past that cap, two things go wrong at once:

Every flex child was allowed to shrink (min-h-0 on the project column, default shrink on the search). The project column got squeezed to 44px while its content stayed 221px tall — with overflow: visible, those project rows painted straight over the search box and session rows. That's the overlap.
ScrollView can't work here. Its viewport needs height: 100%, and percentage heights never resolve under a max-height-only auto-height ancestor chain — the viewport inflated to full content height (measured clientHeight == scrollHeight == 2851px) and the overflow: hidden root simply clipped it. Wheel events moved nothing. The outer flyout didn't scroll either, because its children had "shrunk to fit".

Fix (commit 1)

Project column and search keep natural height (shrink-0); the column self-caps at 38vh and scrolls internally if a pathological project count ever exceeds it.
The sessions list is now its own scroll container — used flex size + overflow-y: auto, no percentage heights involved. Same pattern this file already uses for the multi-server project list and the search-results panel.

Measured after (same harness): list scrolls a 326px window over 2851px of content, wheel scrolls, zero overlap, collapsed state pixel-identical.

Styling (commit 2)

Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears the defaults-capsule popover's surface — bg-base, the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics, and the "Projects" label matches the popover's section-label spec (0.08em tracking).

Verification

tsgo -b (packages/app typecheck): clean
oxlint on home.tsx: 0 errors, 18 warnings — identical count on the base branch, zero new
Headless-browser layout measurements + screenshots for collapsed / expanded / mid-scroll states

🤖 Generated with Claude Code

… list scrolls Expanding to all sessions blew past the flyout's max-height, and every flex child was allowed to shrink: the project column got squeezed far below its content (which then painted over the search box and session rows), and ScrollView's height:100% viewport can't resolve under the flyout's max-height-only auto-height chain — it inflated to full content height and was clipped, so nothing scrolled (headless repro: viewport clientHeight == scrollHeight == 2851px, wheel moved nothing). Fix: project column and search keep natural height (shrink-0; the column caps at 38vh and scrolls internally if projects ever exceed it), and the sessions list is its own scroll container via used flex size + overflow-y — the same pattern as the multi-server project list and the search results panel. Measured after: list scrolls 298px over 2851px of content, zero overlap, collapsed state pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…tyling Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears amicode-defaults-pop's surface — bg-base (was layer-01), the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics like the capsule, and the compact "Projects" label matches the popover's section-label spec (0.08em tracking). Width and max-height stay flyout-specific; the session list needs the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…psule system Kate: the flyout's spacing read as off next to the model+solver popover. Measured both panels live (CDP, computed styles): the shells matched (14px pad / 12px gap) but the flyout's inner components carried legacy insets that fought the panel padding — left edges landed at 30px (search: ml-4/mr-2 width hack), 20px (project header: pl-1.5 + an mt-2 whose compact 'mt-0' override lost the class-order battle and never applied), and 14px (list), three different alignments in one panel. Now every row sits flush at the panel's 14px inset, matching the capsule: - search box: w-full, no side margins - project header: compact mode genuinely drops mt-2 AND pl-1.5 (conditional base classes instead of the losing classList override) - project column rhythm: gap-3 in the flyout (panel rhythm), gap-4 on home - session list: mt-3 dropped — the inner pt-3 already provides the 12px Verified by re-measuring the live panels after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kateebonner · 2026-07-15T05:49:43Z

Bug

Pressing Show all (64) in the sessions dropdown made the panel unusable: content painted on top of itself and nothing scrolled.

Root cause (verified in a headless-Chromium repro of the exact DOM/CSS)

The flyout is an auto-height column flex container capped only by max-height. When the expanded list blows past that cap, two things go wrong at once:

Every flex child was allowed to shrink (min-h-0 on the project column, default shrink on the search). The project column got squeezed to 44px while its content stayed 221px tall — with overflow: visible, those project rows painted straight over the search box and session rows. That's the overlap.
ScrollView can't work here. Its viewport needs height: 100%, and percentage heights never resolve under a max-height-only auto-height ancestor chain — the viewport inflated to full content height (measured clientHeight == scrollHeight == 2851px) and the overflow: hidden root simply clipped it. Wheel events moved nothing. The outer flyout didn't scroll either, because its children had "shrunk to fit".

Fix (commit 1)

Project column and search keep natural height (shrink-0); the column self-caps at 38vh and scrolls internally if a pathological project count ever exceeds it.
The sessions list is now its own scroll container — used flex size + overflow-y: auto, no percentage heights involved. Same pattern this file already uses for the multi-server project list and the search-results panel.

Measured after (same harness): list scrolls a 326px window over 2851px of content, wheel scrolls, zero overlap, collapsed state pixel-identical.

Styling (commit 2)

Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears the defaults-capsule popover's surface — bg-base, the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics, and the "Projects" label matches the popover's section-label spec (0.08em tracking).

Verification

tsgo -b (packages/app typecheck): clean
oxlint on home.tsx: 0 errors, 18 warnings — identical count on the base branch, zero new
Headless-browser layout measurements + screenshots for collapsed / expanded / mid-scroll states

🤖 Generated with Claude Code

… list scrolls Expanding to all sessions blew past the flyout's max-height, and every flex child was allowed to shrink: the project column got squeezed far below its content (which then painted over the search box and session rows), and ScrollView's height:100% viewport can't resolve under the flyout's max-height-only auto-height chain — it inflated to full content height and was clipped, so nothing scrolled (headless repro: viewport clientHeight == scrollHeight == 2851px, wheel moved nothing). Fix: project column and search keep natural height (shrink-0; the column caps at 38vh and scrolls internally if projects ever exceed it), and the sessions list is its own scroll container via used flex size + overflow-y — the same pattern as the multi-server project list and the search results panel. Measured after: list scrolls 298px over 2851px of content, zero overlap, collapsed state pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…tyling Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears amicode-defaults-pop's surface — bg-base (was layer-01), the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics like the capsule, and the compact "Projects" label matches the popover's section-label spec (0.08em tracking). Width and max-height stay flyout-specific; the session list needs the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…psule system Kate: the flyout's spacing read as off next to the model+solver popover. Measured both panels live (CDP, computed styles): the shells matched (14px pad / 12px gap) but the flyout's inner components carried legacy insets that fought the panel padding — left edges landed at 30px (search: ml-4/mr-2 width hack), 20px (project header: pl-1.5 + an mt-2 whose compact 'mt-0' override lost the class-order battle and never applied), and 14px (list), three different alignments in one panel. Now every row sits flush at the panel's 14px inset, matching the capsule: - search box: w-full, no side margins - project header: compact mode genuinely drops mt-2 AND pl-1.5 (conditional base classes instead of the losing classList override) - project column rhythm: gap-3 in the flyout (panel rhythm), gap-4 on home - session list: mt-3 dropped — the inner pt-3 already provides the 12px Verified by re-measuring the live panels after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kateebonner · 2026-07-15T05:49:43Z

Bug

Pressing Show all (64) in the sessions dropdown made the panel unusable: content painted on top of itself and nothing scrolled.

Root cause (verified in a headless-Chromium repro of the exact DOM/CSS)

The flyout is an auto-height column flex container capped only by max-height. When the expanded list blows past that cap, two things go wrong at once:

Every flex child was allowed to shrink (min-h-0 on the project column, default shrink on the search). The project column got squeezed to 44px while its content stayed 221px tall — with overflow: visible, those project rows painted straight over the search box and session rows. That's the overlap.
ScrollView can't work here. Its viewport needs height: 100%, and percentage heights never resolve under a max-height-only auto-height ancestor chain — the viewport inflated to full content height (measured clientHeight == scrollHeight == 2851px) and the overflow: hidden root simply clipped it. Wheel events moved nothing. The outer flyout didn't scroll either, because its children had "shrunk to fit".

Fix (commit 1)

Project column and search keep natural height (shrink-0); the column self-caps at 38vh and scrolls internally if a pathological project count ever exceeds it.
The sessions list is now its own scroll container — used flex size + overflow-y: auto, no percentage heights involved. Same pattern this file already uses for the multi-server project list and the search-results panel.

Measured after (same harness): list scrolls a 326px window over 2851px of content, wheel scrolls, zero overlap, collapsed state pixel-identical.

Styling (commit 2)

Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears the defaults-capsule popover's surface — bg-base, the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics, and the "Projects" label matches the popover's section-label spec (0.08em tracking).

Verification

tsgo -b (packages/app typecheck): clean
oxlint on home.tsx: 0 errors, 18 warnings — identical count on the base branch, zero new
Headless-browser layout measurements + screenshots for collapsed / expanded / mid-scroll states

🤖 Generated with Claude Code

… list scrolls Expanding to all sessions blew past the flyout's max-height, and every flex child was allowed to shrink: the project column got squeezed far below its content (which then painted over the search box and session rows), and ScrollView's height:100% viewport can't resolve under the flyout's max-height-only auto-height chain — it inflated to full content height and was clipped, so nothing scrolled (headless repro: viewport clientHeight == scrollHeight == 2851px, wheel moved nothing). Fix: project column and search keep natural height (shrink-0; the column caps at 38vh and scrolls internally if projects ever exceed it), and the sessions list is its own scroll container via used flex size + overflow-y — the same pattern as the multi-server project list and the search results panel. Measured after: list scrolls 298px over 2851px of content, zero overlap, collapsed state pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…tyling Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears amicode-defaults-pop's surface — bg-base (was layer-01), the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics like the capsule, and the compact "Projects" label matches the popover's section-label spec (0.08em tracking). Width and max-height stay flyout-specific; the session list needs the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…psule system Kate: the flyout's spacing read as off next to the model+solver popover. Measured both panels live (CDP, computed styles): the shells matched (14px pad / 12px gap) but the flyout's inner components carried legacy insets that fought the panel padding — left edges landed at 30px (search: ml-4/mr-2 width hack), 20px (project header: pl-1.5 + an mt-2 whose compact 'mt-0' override lost the class-order battle and never applied), and 14px (list), three different alignments in one panel. Now every row sits flush at the panel's 14px inset, matching the capsule: - search box: w-full, no side margins - project header: compact mode genuinely drops mt-2 AND pl-1.5 (conditional base classes instead of the losing classList override) - project column rhythm: gap-3 in the flyout (panel rhythm), gap-4 on home - session list: mt-3 dropped — the inner pt-3 already provides the 12px Verified by re-measuring the live panels after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kateebonner · 2026-07-15T05:49:43Z

Bug

Pressing Show all (64) in the sessions dropdown made the panel unusable: content painted on top of itself and nothing scrolled.

Root cause (verified in a headless-Chromium repro of the exact DOM/CSS)

The flyout is an auto-height column flex container capped only by max-height. When the expanded list blows past that cap, two things go wrong at once:

Every flex child was allowed to shrink (min-h-0 on the project column, default shrink on the search). The project column got squeezed to 44px while its content stayed 221px tall — with overflow: visible, those project rows painted straight over the search box and session rows. That's the overlap.
ScrollView can't work here. Its viewport needs height: 100%, and percentage heights never resolve under a max-height-only auto-height ancestor chain — the viewport inflated to full content height (measured clientHeight == scrollHeight == 2851px) and the overflow: hidden root simply clipped it. Wheel events moved nothing. The outer flyout didn't scroll either, because its children had "shrunk to fit".

Fix (commit 1)

Project column and search keep natural height (shrink-0); the column self-caps at 38vh and scrolls internally if a pathological project count ever exceeds it.
The sessions list is now its own scroll container — used flex size + overflow-y: auto, no percentage heights involved. Same pattern this file already uses for the multi-server project list and the search-results panel.

Measured after (same harness): list scrolls a 326px window over 2851px of content, wheel scrolls, zero overlap, collapsed state pixel-identical.

Styling (commit 2)

Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears the defaults-capsule popover's surface — bg-base, the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics, and the "Projects" label matches the popover's section-label spec (0.08em tracking).

Verification

tsgo -b (packages/app typecheck): clean
oxlint on home.tsx: 0 errors, 18 warnings — identical count on the base branch, zero new
Headless-browser layout measurements + screenshots for collapsed / expanded / mid-scroll states

🤖 Generated with Claude Code

… list scrolls Expanding to all sessions blew past the flyout's max-height, and every flex child was allowed to shrink: the project column got squeezed far below its content (which then painted over the search box and session rows), and ScrollView's height:100% viewport can't resolve under the flyout's max-height-only auto-height chain — it inflated to full content height and was clipped, so nothing scrolled (headless repro: viewport clientHeight == scrollHeight == 2851px, wheel moved nothing). Fix: project column and search keep natural height (shrink-0; the column caps at 38vh and scrolls internally if projects ever exceed it), and the sessions list is its own scroll container via used flex size + overflow-y — the same pattern as the multi-server project list and the search results panel. Measured after: list scrolls 298px over 2851px of content, zero overlap, collapsed state pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…tyling Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears amicode-defaults-pop's surface — bg-base (was layer-01), the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics like the capsule, and the compact "Projects" label matches the popover's section-label spec (0.08em tracking). Width and max-height stay flyout-specific; the session list needs the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…psule system Kate: the flyout's spacing read as off next to the model+solver popover. Measured both panels live (CDP, computed styles): the shells matched (14px pad / 12px gap) but the flyout's inner components carried legacy insets that fought the panel padding — left edges landed at 30px (search: ml-4/mr-2 width hack), 20px (project header: pl-1.5 + an mt-2 whose compact 'mt-0' override lost the class-order battle and never applied), and 14px (list), three different alignments in one panel. Now every row sits flush at the panel's 14px inset, matching the capsule: - search box: w-full, no side margins - project header: compact mode genuinely drops mt-2 AND pl-1.5 (conditional base classes instead of the losing classList override) - project column rhythm: gap-3 in the flyout (panel rhythm), gap-4 on home - session list: mt-3 dropped — the inner pt-3 already provides the 12px Verified by re-measuring the live panels after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kateebonner · 2026-07-15T05:49:43Z

Bug

Pressing Show all (64) in the sessions dropdown made the panel unusable: content painted on top of itself and nothing scrolled.

Root cause (verified in a headless-Chromium repro of the exact DOM/CSS)

The flyout is an auto-height column flex container capped only by max-height. When the expanded list blows past that cap, two things go wrong at once:

Every flex child was allowed to shrink (min-h-0 on the project column, default shrink on the search). The project column got squeezed to 44px while its content stayed 221px tall — with overflow: visible, those project rows painted straight over the search box and session rows. That's the overlap.
ScrollView can't work here. Its viewport needs height: 100%, and percentage heights never resolve under a max-height-only auto-height ancestor chain — the viewport inflated to full content height (measured clientHeight == scrollHeight == 2851px) and the overflow: hidden root simply clipped it. Wheel events moved nothing. The outer flyout didn't scroll either, because its children had "shrunk to fit".

Fix (commit 1)

Project column and search keep natural height (shrink-0); the column self-caps at 38vh and scrolls internally if a pathological project count ever exceeds it.
The sessions list is now its own scroll container — used flex size + overflow-y: auto, no percentage heights involved. Same pattern this file already uses for the multi-server project list and the search-results panel.

Measured after (same harness): list scrolls a 326px window over 2851px of content, wheel scrolls, zero overlap, collapsed state pixel-identical.

Styling (commit 2)

Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears the defaults-capsule popover's surface — bg-base, the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics, and the "Projects" label matches the popover's section-label spec (0.08em tracking).

Verification

tsgo -b (packages/app typecheck): clean
oxlint on home.tsx: 0 errors, 18 warnings — identical count on the base branch, zero new
Headless-browser layout measurements + screenshots for collapsed / expanded / mid-scroll states

🤖 Generated with Claude Code

… list scrolls Expanding to all sessions blew past the flyout's max-height, and every flex child was allowed to shrink: the project column got squeezed far below its content (which then painted over the search box and session rows), and ScrollView's height:100% viewport can't resolve under the flyout's max-height-only auto-height chain — it inflated to full content height and was clipped, so nothing scrolled (headless repro: viewport clientHeight == scrollHeight == 2851px, wheel moved nothing). Fix: project column and search keep natural height (shrink-0; the column caps at 38vh and scrolls internally if projects ever exceed it), and the sessions list is its own scroll container via used flex size + overflow-y — the same pattern as the multi-server project list and the search results panel. Measured after: list scrolls 298px over 2851px of content, zero overlap, collapsed state pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…tyling Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears amicode-defaults-pop's surface — bg-base (was layer-01), the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics like the capsule, and the compact "Projects" label matches the popover's section-label spec (0.08em tracking). Width and max-height stay flyout-specific; the session list needs the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…psule system Kate: the flyout's spacing read as off next to the model+solver popover. Measured both panels live (CDP, computed styles): the shells matched (14px pad / 12px gap) but the flyout's inner components carried legacy insets that fought the panel padding — left edges landed at 30px (search: ml-4/mr-2 width hack), 20px (project header: pl-1.5 + an mt-2 whose compact 'mt-0' override lost the class-order battle and never applied), and 14px (list), three different alignments in one panel. Now every row sits flush at the panel's 14px inset, matching the capsule: - search box: w-full, no side margins - project header: compact mode genuinely drops mt-2 AND pl-1.5 (conditional base classes instead of the losing classList override) - project column rhythm: gap-3 in the flyout (panel rhythm), gap-4 on home - session list: mt-3 dropped — the inner pt-3 already provides the 12px Verified by re-measuring the live panels after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kateebonner · 2026-07-15T05:49:43Z

Bug

Pressing Show all (64) in the sessions dropdown made the panel unusable: content painted on top of itself and nothing scrolled.

Root cause (verified in a headless-Chromium repro of the exact DOM/CSS)

The flyout is an auto-height column flex container capped only by max-height. When the expanded list blows past that cap, two things go wrong at once:

Every flex child was allowed to shrink (min-h-0 on the project column, default shrink on the search). The project column got squeezed to 44px while its content stayed 221px tall — with overflow: visible, those project rows painted straight over the search box and session rows. That's the overlap.
ScrollView can't work here. Its viewport needs height: 100%, and percentage heights never resolve under a max-height-only auto-height ancestor chain — the viewport inflated to full content height (measured clientHeight == scrollHeight == 2851px) and the overflow: hidden root simply clipped it. Wheel events moved nothing. The outer flyout didn't scroll either, because its children had "shrunk to fit".

Fix (commit 1)

Project column and search keep natural height (shrink-0); the column self-caps at 38vh and scrolls internally if a pathological project count ever exceeds it.
The sessions list is now its own scroll container — used flex size + overflow-y: auto, no percentage heights involved. Same pattern this file already uses for the multi-server project list and the search-results panel.

Measured after (same harness): list scrolls a 326px window over 2851px of content, wheel scrolls, zero overlap, collapsed state pixel-identical.

Styling (commit 2)

Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears the defaults-capsule popover's surface — bg-base, the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics, and the "Projects" label matches the popover's section-label spec (0.08em tracking).

Verification

tsgo -b (packages/app typecheck): clean
oxlint on home.tsx: 0 errors, 18 warnings — identical count on the base branch, zero new
Headless-browser layout measurements + screenshots for collapsed / expanded / mid-scroll states

🤖 Generated with Claude Code

… list scrolls Expanding to all sessions blew past the flyout's max-height, and every flex child was allowed to shrink: the project column got squeezed far below its content (which then painted over the search box and session rows), and ScrollView's height:100% viewport can't resolve under the flyout's max-height-only auto-height chain — it inflated to full content height and was clipped, so nothing scrolled (headless repro: viewport clientHeight == scrollHeight == 2851px, wheel moved nothing). Fix: project column and search keep natural height (shrink-0; the column caps at 38vh and scrolls internally if projects ever exceed it), and the sessions list is its own scroll container via used flex size + overflow-y — the same pattern as the multi-server project list and the search results panel. Measured after: list scrolls 298px over 2851px of content, zero overlap, collapsed state pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…tyling Kate: the two chrome-strip dropdowns should read as one family. The sessions panel now wears amicode-defaults-pop's surface — bg-base (was layer-01), the same 0 14px 40px -18px floating shadow, 14px padding, 12px gap — plus role="dialog" semantics like the capsule, and the compact "Projects" label matches the popover's section-label spec (0.08em tracking). Width and max-height stay flyout-specific; the session list needs the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…psule system Kate: the flyout's spacing read as off next to the model+solver popover. Measured both panels live (CDP, computed styles): the shells matched (14px pad / 12px gap) but the flyout's inner components carried legacy insets that fought the panel padding — left edges landed at 30px (search: ml-4/mr-2 width hack), 20px (project header: pl-1.5 + an mt-2 whose compact 'mt-0' override lost the class-order battle and never applied), and 14px (list), three different alignments in one panel. Now every row sits flush at the panel's 14px inset, matching the capsule: - search box: w-full, no side margins - project header: compact mode genuinely drops mt-2 AND pl-1.5 (conditional base classes instead of the losing classList override) - project column rhythm: gap-3 in the flyout (panel rhythm), gap-4 on home - session list: mt-3 dropped — the inner pt-3 already provides the 12px Verified by re-measuring the live panels after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kateebonnerand others added 3 commits July 15, 2026 01:43