diff --git a/src/components/insights/coach-panel/__tests__/coach-settings-sheet.test.tsx b/src/components/insights/coach-panel/__tests__/coach-settings-sheet.test.tsx index d5167d631..b43d9835a 100644 --- a/src/components/insights/coach-panel/__tests__/coach-settings-sheet.test.tsx +++ b/src/components/insights/coach-panel/__tests__/coach-settings-sheet.test.tsx @@ -55,6 +55,11 @@ vi.mock("@/components/ui/sheet", () => ({ SheetDescription: ({ children }: { children: React.ReactNode }) => (

{children}

), + // v1.4.27 R3d MB1 — the settings sheet now renders an inline + // `` in the header instead of the primitive's + // absolutely-positioned close-X. Mock it as a passthrough so the + // existing skeleton + form snapshot assertions keep working. + SheetClose: ({ children }: { children: React.ReactNode }) => <>{children}, })); import { CoachSettingsSheet } from "../coach-settings-sheet"; diff --git a/src/components/insights/coach-panel/coach-settings-sheet.tsx b/src/components/insights/coach-panel/coach-settings-sheet.tsx index f85383b2e..6a963f0d5 100644 --- a/src/components/insights/coach-panel/coach-settings-sheet.tsx +++ b/src/components/insights/coach-panel/coach-settings-sheet.tsx @@ -5,8 +5,11 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { Loader2 } from "lucide-react"; import { toast } from "sonner"; +import { X } from "lucide-react"; + import { Sheet, + SheetClose, SheetContent, SheetDescription, SheetHeader, @@ -140,16 +143,39 @@ export function CoachSettingsSheet({ ` close-X is an + // absolutely positioned `opacity-70 rounded-xs` button that + // clashed with the in-header layout. Match the coach-drawer + // pattern instead: hide the primitive's close-X and render a + // matching ghost-icon `` inline in the header so + // the close affordance sits on the same baseline as the rest + // of the sheet chrome and clears the 44 px tap target. + showCloseButton={false} data-slot="coach-settings-sheet" className="flex h-[100dvh] w-full flex-col gap-0 p-0 sm:max-w-[420px]" > - - - {t("insights.coach.settingsTitle")} - - - {t("insights.coach.settingsDescription")} - + +
+ + {t("insights.coach.settingsTitle")} + + + {t("insights.coach.settingsDescription")} + +
+ + +
{isLoading ? (