From ddb2914b6510f4ecebecd4e1edcff09d50b6fb59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 10 May 2026 19:24:05 +0200
Subject: [PATCH] =?UTF-8?q?fix(coach):=20drawer=20header=20=E2=80=94=20clo?=
 =?UTF-8?q?se-X=20/=20cog=20collision?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Radix Sheet paints its default close-X at absolute top-4 right-4. The
v1.4.20 drawer header parked the settings cog inside the right-edge
button cluster (next to the New chat button), so the close-X overlay
visually swallowed the cog — the icon still rendered but read as
unclickable.

Move the cog to the left side, immediately after the gradient
avatar, so the right edge is reserved for Radix's close-X alone. Add
pr-12 / sm:pr-14 padding to the header so the New chat button can
never slide under the close-X on narrower viewports either.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../insights/coach-panel/coach-drawer.tsx     | 60 +++++++++++--------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/components/insights/coach-panel/coach-drawer.tsx b/src/components/insights/coach-panel/coach-drawer.tsx
index e4522d3a3..07ccf139b 100644
--- a/src/components/insights/coach-panel/coach-drawer.tsx
+++ b/src/components/insights/coach-panel/coach-drawer.tsx
@@ -148,10 +148,18 @@ export function CoachDrawer({
           "flex h-[100dvh] flex-col gap-0",
         )}
       >
-        {/* Header (full width). Title + new-chat button + settings. */}
+        {/* Header (full width). Title + new-chat button. Settings cog
+            sits next to the avatar on the LEFT — the previous layout
+            painted it next to the new-chat button on the right, where
+            Radix Sheet's default close-X (absolute top-4 right-4)
+            overlapped the cog and made it visually un-clickable. The
+            new layout keeps the cog inside the visible header column
+            and reserves the right edge for the close-X alone.
+            v1.4.20.1: pr-12 ensures the new-chat button never slides
+            under the close-X on narrower viewports either. */}
         <SheetHeader
           data-slot="coach-drawer-header"
-          className="border-border/70 flex-row items-center gap-3 border-b p-3 sm:p-4"
+          className="border-border/70 flex-row items-center gap-3 border-b p-3 pr-12 sm:p-4 sm:pr-14"
         >
           <div
             aria-hidden="true"
@@ -159,6 +167,29 @@ export function CoachDrawer({
           >
             <Sparkles className="text-background size-4" />
           </div>
+          <TooltipProvider delayDuration={200}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  disabled
+                  // Match the visible disabled state — sighted users
+                  // see a coming-soon tooltip; SR users hear the same
+                  // copy instead of a working "Coach settings" label.
+                  aria-label={t("insights.coach.settingsTooltip")}
+                  data-slot="coach-drawer-settings"
+                  className="size-8 shrink-0"
+                >
+                  <Settings2 className="size-4" aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t("insights.coach.settingsTooltip")}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
           <div className="min-w-0 flex-1">
             <SheetTitle className="truncate text-sm font-semibold">
               {drawerTitle}
@@ -173,36 +204,13 @@ export function CoachDrawer({
             size="sm"
             onClick={handleNewChat}
             data-slot="coach-drawer-new-chat"
-            className="gap-1.5"
+            className="shrink-0 gap-1.5"
           >
             <Plus className="size-3.5" aria-hidden="true" />
             <span className="hidden sm:inline">
               {t("insights.coach.newChat")}
             </span>
           </Button>
-          <TooltipProvider delayDuration={200}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  disabled
-                  // Match the visible disabled state — sighted users
-                  // see a coming-soon tooltip; SR users hear the same
-                  // copy instead of a working "Coach settings" label.
-                  aria-label={t("insights.coach.settingsTooltip")}
-                  data-slot="coach-drawer-settings"
-                  className="size-8"
-                >
-                  <Settings2 className="size-4" aria-hidden="true" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {t("insights.coach.settingsTooltip")}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
         </SheetHeader>
 
         {/* Body — three columns on lg+, single column on smaller.