),
+ // 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")}
-
+
+