From c66e5990c96dc375861b34edfbb113a33f13b714 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Sun, 10 May 2026 15:49:16 -0700 Subject: [PATCH] fix(examples-chat): responsive shell side panels at <=1024px The demo shell pinned the threads panel (left, 240px) and timeline panel (right, 280px) as fixed-position columns with no breakpoints. At 1024px viewport both panels open the chat column shrank to ~480px; below 768px they overlapped the central chat surface and each other. Two breakpoints: - <=1024px: narrow the two panels to 200/240px so the chat keeps ~560px - <=768px: promote both panels to a centered floating sheet (gutter-aligned, rounded, shadowed) so they stack above the chat instead of crowding it Toggle behaviour is unchanged; only the geometry of the open state shifts. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../src/app/shell/demo-shell.component.css | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.css b/examples/chat/angular/src/app/shell/demo-shell.component.css index 2d510ab7..05cd0350 100644 --- a/examples/chat/angular/src/app/shell/demo-shell.component.css +++ b/examples/chat/angular/src/app/shell/demo-shell.component.css @@ -76,3 +76,28 @@ flex-direction: column; gap: 8px; } + +/* Narrow the side panels at tablet widths so the chat column keeps a usable + minimum (~480px) when both panels are open. */ +@media (max-width: 1024px) { + .demo-shell__threads-panel { width: 200px; } + .demo-shell__timeline-panel { width: 240px; } +} + +/* Below tablet the fixed side panels would steal too much of the chat + surface. Promote them to a centered overlay sheet — still toggle-driven, + but full-width modulo gutter, and they stack above the chat instead of + crowding it. */ +@media (max-width: 768px) { + .demo-shell__threads-panel, + .demo-shell__timeline-panel { + left: 16px; + right: 16px; + width: auto; + top: 72px; + bottom: 112px; + border: 1px solid #303540; + border-radius: 10px; + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); + } +}