diff --git a/src/components/insights/coach-panel/__tests__/coach-drawer-mobile-trays.test.tsx b/src/components/insights/coach-panel/__tests__/coach-drawer-mobile-trays.test.tsx index ea7859d47..9261e8486 100644 --- a/src/components/insights/coach-panel/__tests__/coach-drawer-mobile-trays.test.tsx +++ b/src/components/insights/coach-panel/__tests__/coach-drawer-mobile-trays.test.tsx @@ -9,10 +9,13 @@ import { CoachDrawerBody } from "../coach-drawer-body"; * * The drawer hides the history + sources rails on `` so the SSR test can pin their `lg:hidden` class - * + slot markers without rendering the outer Radix `` portal - * (which is client-only). + * open side-sheets surfacing the same rails. + * + * Phase D reconcile narrowed the lg drawer cap (was 1080px → now + * min(960px,75vw)) so the inline sources rail no longer fits below + * xl. The history rail surfaces inline on lg; the sources rail + * surfaces inline on xl. Mobile chevron triggers cover the missing + * rails: history hidden on lg+, sources hidden on xl+. */ function render(node: React.ReactNode, locale: "en" | "de" = "en") { @@ -37,7 +40,7 @@ describe(" — mobile rail trays", () => { expect(html).toMatch(/data-slot="coach-drawer-sources-tray-trigger"/); }); - it("hides both triggers on >=lg via the lg:hidden class", () => { + it("hides the history trigger on >=lg and the sources trigger on >=xl", () => { const html = render(); const historyTrigger = html.match( /]*data-slot="coach-drawer-history-tray-trigger"[^>]*>/, @@ -49,16 +52,16 @@ describe(" — mobile rail trays", () => { /]*data-slot="coach-drawer-sources-tray-trigger"[^>]*>/, ); expect(sourcesTrigger).not.toBeNull(); - expect(sourcesTrigger?.[0]).toContain("lg:hidden"); + expect(sourcesTrigger?.[0]).toContain("xl:hidden"); }); - it("renders the desktop history + sources rails (visible on >=lg)", () => { + it("renders the desktop history rail (lg+) and sources rail (xl+)", () => { const html = render(); expect(html).toMatch( /]*data-slot="coach-drawer-history"[^>]*lg:flex/, ); expect(html).toMatch( - /]*data-slot="coach-drawer-sources"[^>]*lg:flex/, + /]*data-slot="coach-drawer-sources"[^>]*xl:flex/, ); }); diff --git a/src/components/insights/coach-panel/coach-drawer-body.tsx b/src/components/insights/coach-panel/coach-drawer-body.tsx index 3ba0952da..3b8e65a7c 100644 --- a/src/components/insights/coach-panel/coach-drawer-body.tsx +++ b/src/components/insights/coach-panel/coach-drawer-body.tsx @@ -41,7 +41,11 @@ export function CoachDrawerBody({ return (
{/* History rail — desktop only. Mobile users summon it via the tray trigger inside the thread column. */} @@ -71,6 +75,8 @@ export function CoachDrawerBody({
- {/* Sources rail — desktop only. */} + {/* Sources rail — xl+ only. lg viewports surface it via the + mobile chevron tray to keep the underlying /insights column + readable behind the narrowed drawer cap. */} diff --git a/src/components/insights/coach-panel/coach-drawer.tsx b/src/components/insights/coach-panel/coach-drawer.tsx index 942930d1e..e993579f6 100644 --- a/src/components/insights/coach-panel/coach-drawer.tsx +++ b/src/components/insights/coach-panel/coach-drawer.tsx @@ -134,7 +134,15 @@ export function CoachDrawer({ showCloseButton data-slot="coach-drawer" className={cn( - "w-full p-0 sm:max-w-[720px] lg:max-w-[1080px]", + // Drawer keeps the dashboard context behind it. On laptops + // (1280-1366px viewports) the previous lg:max-w-[1080px] cap + // left only ~200-286px of underlying /insights visible — a + // takeover, not a sheet. Drop the lg cap to min(960px,75vw) + // so /insights always retains a readable column; restore + // the wider three-column layout at xl+ (≥1280px sources rail + // is hidden below xl by the body's lg:hidden chevron rules). + "w-full p-0 sm:max-w-[720px]", + "lg:!max-w-[min(960px,75vw)] xl:!max-w-[1080px]", "flex h-[100dvh] flex-col gap-0", )} > @@ -260,7 +268,9 @@ export function CoachDrawer({