tom/HealthLog
1
0 Fork 0
mirror of https://github.com/MBombeck/HealthLog.git synced 2026-11-07 12:22:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(coach): drawer header — close-X / cog collision

Browse Source 
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>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-10 19:24:05 +02:00
1 parent f07e35bb9a
commit ddb2914b65
1 file changed
+34 -26
Download Patch File Download Diff File Expand all files Collapse all files
src/components/insights/coach-panel/coach-drawer.tsx
+34 -26
View File
@@ -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.