fix(ui): opaque session banner + header stacking context - #404
Conversation
dimakis
left a comment
dimakis
left a comment
There was a problem hiding this comment.
Centaur Review
LGTM — no issues found.
The session banner used undefined --bg-primary (resolved to transparent), so scrolled content bled through behind it and the header toolbar. - Replace var(--bg-primary) with var(--surface) on .session-banner - Add position:relative + z-index:20 to .chat-header so scroll content never renders above it - Remove top padding from .chat-messages so the sticky banner sits flush against the header with no transparent gap - Horizontal negative margin on the banner to span full scroll width Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Negative top margin overlaps the header border, eliminating the sub-pixel rendering gap. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use a color-matched box-shadow on the header to extend its visual coverage, eliminating the remaining transparent gap on iOS Safari. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
99067fd to
5a6ff48
Compare
dimakis
left a comment
dimakis
left a comment
There was a problem hiding this comment.
Centaur Review
Found 2 issue(s) (1 warning).
frontend/src/styles/global.css
Good fix for the undefined --bg-primary variable (banner was transparent) and proper stacking context, but removing top padding from .chat-messages introduces a minor visual regression when no session banner is present — first message content gets clipped by the header's box-shadow on mobile.
- 🟡 regressions (L1672): Removing top padding from
.chat-messages(wasvar(--space-4), now0) means that when no session banner is rendered (SessionBanner returns null when bootContext and sessionContext are both absent), the first message sits flush against the header. Combined with the new 4px box-shadow on.chat-header(z-index 20), the top ~4px of the first message will be visually obscured. Consider adding a small top margin/padding to.chat-messageschildren or using a CSS:first-childrule to restore spacing when the banner is absent.[fixable] - 🔵 style (L2433): The negative horizontal margin
calc(-1 * var(--space-3))makes the banner full-bleed on mobile where.chat-messagesusesvar(--space-3)horizontal padding, but on desktop the container padding isvar(--space-6)(2rem) while the banner only pulls back 0.75rem. The banner won't reach the container edges on desktop. This may be fine visually, but if full-bleed is intended across breakpoints, the negative margin should use a CSS variable or be overridden in the desktop media query.[fixable]
| overflow-y: auto; | ||
| -webkit-overflow-scrolling: touch; | ||
| padding: var(--space-4) var(--space-3); | ||
| padding: 0 var(--space-3) var(--space-4); |
There was a problem hiding this comment.
🟡 regressions: Removing top padding from .chat-messages (was var(--space-4), now 0) means that when no session banner is rendered (SessionBanner returns null when bootContext and sessionContext are both absent), the first message sits flush against the header. Combined with the new 4px box-shadow on .chat-header (z-index 20), the top ~4px of the first message will be visually obscured. Consider adding a small top margin/padding to .chat-messages children or using a CSS :first-child rule to restore spacing when the banner is absent. [fixable]
| position: sticky; | ||
| top: 0; | ||
| z-index: 10; | ||
| margin: -1px calc(-1 * var(--space-3)) 0; |
There was a problem hiding this comment.
🔵 style: The negative horizontal margin calc(-1 * var(--space-3)) makes the banner full-bleed on mobile where .chat-messages uses var(--space-3) horizontal padding, but on desktop the container padding is var(--space-6) (2rem) while the banner only pulls back 0.75rem. The banner won't reach the container edges on desktop. This may be fine visually, but if full-bleed is intended across breakpoints, the negative margin should use a CSS variable or be overridden in the desktop media query. [fixable]
PR #441's squash merge was based on a branch that predated PR #404, silently reverting three CSS fixes: - .chat-header: lost position:relative, z-index:20, box-shadow - .chat-messages: top padding reverted (content bleeds under header) - .session-banner: background reverted to undefined --bg-primary Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
PR #441's squash merge was based on a branch that predated PR #404, silently reverting three CSS fixes: - .chat-header: lost position:relative, z-index:20, box-shadow - .chat-messages: top padding reverted (content bleeds under header) - .session-banner: background reverted to undefined --bg-primary Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix(task-board): add spawn kill switch to mobile task board page The toggle was only in TaskBoardSection (desktop collapsible view). The mobile full-page TaskBoard at pages/TaskBoard.tsx was missing it. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(ui): restore opaque header + session banner from PR #404 PR #441's squash merge was based on a branch that predated PR #404, silently reverting three CSS fixes: - .chat-header: lost position:relative, z-index:20, box-shadow - .chat-messages: top padding reverted (content bleeds under header) - .session-banner: background reverted to undefined --bg-primary Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 participant
Summary
--bg-primaryCSS variable (resolved totransparent), causing scrolled content to bleed through.chat-messagescreated a transparent gap between header and sticky bannerChanges
var(--bg-primary)withvar(--surface)on.session-bannerposition: relative+z-index: 20to.chat-header.chat-messagesto bottom-only, so sticky banner sits flushTest plan
🤖 Generated with Claude Code