From b382eec69792c0dedf689b38a119b6943e025089 Mon Sep 17 00:00:00 2001 From: dimakis Date: Sat, 27 Jun 2026 12:02:14 +0100 Subject: [PATCH 1/3] fix(ui): opaque session banner + header stacking context 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 --- frontend/src/styles/global.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 9fd01649..8de1fdec 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -1475,6 +1475,8 @@ textarea:focus { background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; + position: relative; + z-index: 20; transition: max-height 0.2s, padding 0.2s, @@ -1666,7 +1668,7 @@ textarea:focus { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; - padding: var(--space-4) var(--space-3); + padding: 0 var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); @@ -2427,8 +2429,10 @@ textarea:focus { position: sticky; top: 0; z-index: 10; + margin: 0 calc(-1 * var(--space-3)); + padding: 0 var(--space-3); border-bottom: 1px solid var(--border); - background: var(--bg-primary); + background: var(--surface); } .session-banner-header { From 47242a95d4cb163aa88f214fd1011b6c558ce82f Mon Sep 17 00:00:00 2001 From: dimakis Date: Sat, 27 Jun 2026 12:03:20 +0100 Subject: [PATCH 2/3] fix(ui): close 1px gap between header and session banner Negative top margin overlaps the header border, eliminating the sub-pixel rendering gap. Co-Authored-By: Claude Opus 4.6 --- frontend/src/styles/global.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 8de1fdec..631084d3 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -2429,7 +2429,7 @@ textarea:focus { position: sticky; top: 0; z-index: 10; - margin: 0 calc(-1 * var(--space-3)); + margin: -1px calc(-1 * var(--space-3)) 0; padding: 0 var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface); From 5a6ff4849b6bbb3c1003e5d2b6e6aa2a993636ad Mon Sep 17 00:00:00 2001 From: dimakis Date: Sat, 27 Jun 2026 12:10:06 +0100 Subject: [PATCH 3/3] fix(ui): box-shadow bridge between header and session banner 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 --- frontend/src/styles/global.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 631084d3..c5edbd81 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -1477,6 +1477,7 @@ textarea:focus { flex-shrink: 0; position: relative; z-index: 20; + box-shadow: 0 4px 0 0 var(--surface); transition: max-height 0.2s, padding 0.2s,