From b02e3e4072579270fbcb08387be390eef9173c4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 28 Jun 2026 02:53:06 +0200
Subject: [PATCH] fix(mobile): close safe-area gaps and lift sub-44px tap
 targets

Subtract both the top and bottom safe-area insets from the full-page
Coach height so the composer no longer slides behind the bottom-nav on a
notched phone, and pad the Coach drawer composer and the ResponsiveSheet
bottom-sheet footer for the home-indicator band.

Raise the cycle and illness day-log severity controls to a 44px touch
floor, add hit-slop to the custom-symptom remove button, give the shared
day-log chips a min height, and let the mood-tag action cluster wrap so a
360px row no longer clips the tag name.
---
 src/app/coach/page.tsx                        |   2 +-
 src/components/cycle/log-day-sheet.tsx        |   6 +-
 src/components/illness/log-day-sheet.tsx      |   6 +-
 .../coach-panel/coach-drawer-body.tsx         |   2 +-
 .../mood/manage/tag-manager-card.tsx          | 206 +++++++++---------
 src/components/ui/responsive-sheet.tsx        |   2 +-
 6 files changed, 114 insertions(+), 110 deletions(-)

diff --git a/src/app/coach/page.tsx b/src/app/coach/page.tsx
index 85870cf99..c956134fc 100644
--- a/src/app/coach/page.tsx
+++ b/src/app/coach/page.tsx
@@ -136,7 +136,7 @@ export default function CoachPage() {
       // `env(safe-area-inset-bottom)`) so the docked composer / Stop control
       // always clears the nav instead of sitting under it. On `md+` the nav
       // is hidden, so the page reclaims the full height below the TopBar.
-      className="bg-background -mx-4 -mt-6 -mb-20 flex h-[calc(100dvh-8rem-env(safe-area-inset-bottom,0px))] min-h-[32rem] flex-col overflow-hidden md:-mx-6 md:h-[calc(100dvh-4rem)]"
+      className="bg-background -mx-4 -mt-6 -mb-20 flex h-[calc(100dvh-8rem-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px))] min-h-[32rem] flex-col overflow-hidden md:-mx-6 md:h-[calc(100dvh-4rem)]"
     >
       {/* `useSearchParams` requires a Suspense boundary so the client-search
           bailout never opts the whole route out of static optimisation. */}
diff --git a/src/components/cycle/log-day-sheet.tsx b/src/components/cycle/log-day-sheet.tsx
index 00a78ba19..9a0c4797e 100644
--- a/src/components/cycle/log-day-sheet.tsx
+++ b/src/components/cycle/log-day-sheet.tsx
@@ -423,7 +423,7 @@ function Chip({
       aria-pressed={active}
       onClick={onClick}
       className={cn(
-        "focus-visible:ring-ring/50 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none",
+        "focus-visible:ring-ring/50 inline-flex min-h-11 items-center rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none sm:min-h-8",
         active
           ? "border-primary bg-primary/10 text-primary"
           : "border-border text-foreground hover:bg-accent",
@@ -1225,7 +1225,7 @@ function SymptomChip({
             onClick={handleRemove}
             disabled={deleteCustom.isPending}
             aria-label={t("cycle.symptom.custom.remove", { label })}
-            className="border-border bg-background text-muted-foreground hover:text-destructive hover:border-destructive focus-visible:ring-ring/50 -ml-1.5 grid size-4 shrink-0 place-items-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            className="border-border bg-background text-muted-foreground hover:text-destructive hover:border-destructive focus-visible:ring-ring/50 relative -ml-1.5 grid size-4 shrink-0 place-items-center rounded-full border transition-colors before:absolute before:-inset-2 before:content-[''] focus-visible:ring-2 focus-visible:outline-none"
           >
             <X className="size-2.5" aria-hidden="true" />
           </button>
@@ -1245,7 +1245,7 @@ function SymptomChip({
               aria-label={t("cycle.sheet.severityLevel", { level: lvl })}
               onClick={() => onSeverity(symptomKey, lvl)}
               className={cn(
-                "focus-visible:ring-ring/50 size-6 rounded-full border text-xs tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none",
+                "focus-visible:ring-ring/50 grid size-11 place-items-center rounded-full border text-xs tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none sm:size-8",
                 severity === lvl
                   ? "border-primary bg-primary/15 text-primary font-semibold"
                   : "border-border text-muted-foreground hover:bg-accent",
diff --git a/src/components/illness/log-day-sheet.tsx b/src/components/illness/log-day-sheet.tsx
index 1f6a740e8..0afacddc7 100644
--- a/src/components/illness/log-day-sheet.tsx
+++ b/src/components/illness/log-day-sheet.tsx
@@ -60,7 +60,7 @@ function Chip({
       aria-pressed={active}
       onClick={onClick}
       className={cn(
-        "rounded-full border px-3 py-1.5 text-sm transition-colors",
+        "inline-flex min-h-11 items-center rounded-full border px-3 py-1.5 text-sm transition-colors sm:min-h-8",
         active
           ? "border-primary bg-primary/10 text-foreground"
           : "border-border text-muted-foreground hover:bg-muted",
@@ -95,7 +95,7 @@ function SymptomChip({
         aria-pressed={active}
         onClick={onToggle}
         className={cn(
-          "flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition-colors",
+          "flex min-h-11 items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition-colors sm:min-h-8",
           active
             ? "border-primary bg-primary/10 text-foreground"
             : "border-border text-muted-foreground hover:bg-muted",
@@ -117,7 +117,7 @@ function SymptomChip({
               aria-pressed={severity === value}
               onClick={() => onSeverity(value)}
               className={cn(
-                "h-6 w-6 rounded-md border text-xs",
+                "grid h-11 w-11 place-items-center rounded-md border text-xs sm:h-8 sm:w-8",
                 severity === value
                   ? "border-primary bg-primary/10 text-foreground"
                   : "border-border text-muted-foreground hover:bg-muted",
diff --git a/src/components/insights/coach-panel/coach-drawer-body.tsx b/src/components/insights/coach-panel/coach-drawer-body.tsx
index 3933b2fe4..4263ecaa3 100644
--- a/src/components/insights/coach-panel/coach-drawer-body.tsx
+++ b/src/components/insights/coach-panel/coach-drawer-body.tsx
@@ -234,7 +234,7 @@ export function CoachDrawerBody({
         {/* Composer pinned to the bottom. */}
         <div
           data-slot="coach-drawer-composer"
-          className="border-border/70 flex flex-col gap-2 border-t p-3 sm:p-4"
+          className="border-border/70 flex flex-col gap-2 border-t p-3 pb-[calc(env(safe-area-inset-bottom,0px)+0.75rem)] sm:p-4 sm:pb-[calc(env(safe-area-inset-bottom,0px)+1rem)]"
         >
           {composer}
         </div>
diff --git a/src/components/mood/manage/tag-manager-card.tsx b/src/components/mood/manage/tag-manager-card.tsx
index 1e7a25fa6..34f37066f 100644
--- a/src/components/mood/manage/tag-manager-card.tsx
+++ b/src/components/mood/manage/tag-manager-card.tsx
@@ -502,7 +502,7 @@ function SortableTagRow({
       data-tag={tag.key}
       data-hidden={isHidden ? "true" : undefined}
       data-dragging={isDragging ? "true" : undefined}
-      className={`border-border bg-background/30 flex min-h-12 items-center gap-2 rounded-md border px-3 py-2 ${
+      className={`border-border bg-background/30 flex min-h-12 flex-wrap items-center gap-2 rounded-md border px-3 py-2 ${
         isDragging ? "ring-primary z-10 opacity-90 shadow-lg ring-2" : ""
       } ${isHidden ? "opacity-60" : ""}`}
     >
@@ -523,7 +523,7 @@ function SortableTagRow({
         className="text-muted-foreground h-4 w-4 shrink-0"
         aria-hidden="true"
       />
-      <span className="min-w-0 flex-1 truncate text-sm" title={name}>
+      <span className="min-w-[8rem] flex-1 truncate text-sm" title={name}>
         {name}
       </span>
       {tag.kind === "RATED" && (
@@ -536,106 +536,110 @@ function SortableTagRow({
           {t("mood.manage.usageCount", { count: String(tag.usageCount) })}
         </Badge>
       )}
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="size-11 sm:size-9"
-        onClick={() => onToggleVisibility(tag)}
-        disabled={disabled}
-        aria-pressed={tag.custom ? undefined : isHidden}
-        aria-label={`${
-          tag.custom
-            ? t("mood.manage.archive")
-            : isHidden
-              ? t("mood.manage.showTag")
-              : t("mood.manage.hideTag")
-        } — ${name}`}
-        title={
-          tag.custom
-            ? t("mood.manage.archive")
-            : isHidden
-              ? t("mood.manage.showTag")
-              : t("mood.manage.hideTag")
-        }
-      >
-        {tag.custom ? (
-          <Archive className="h-4 w-4" aria-hidden="true" />
-        ) : isHidden ? (
-          <EyeOff className="h-4 w-4" aria-hidden="true" />
-        ) : (
-          <Eye className="h-4 w-4" aria-hidden="true" />
-        )}
-      </Button>
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="size-11 sm:size-9"
-        onClick={() => onMove(groupKey, tag.key, -1)}
-        disabled={index === 0 || disabled}
-        aria-label={`${t("mood.manage.moveUp")} — ${name}`}
-      >
-        <ArrowUp className="h-4 w-4" />
-      </Button>
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="size-11 sm:size-9"
-        onClick={() => onMove(groupKey, tag.key, 1)}
-        disabled={index === total - 1 || disabled}
-        aria-label={`${t("mood.manage.moveDown")} — ${name}`}
-      >
-        <ArrowDown className="h-4 w-4" />
-      </Button>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-11 sm:size-9"
-            aria-label={`${t("common.moreOptions")} — ${name}`}
-          >
-            <MoreHorizontal className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {tag.custom && (
-            <DropdownMenuItem onClick={() => onEdit(tag)}>
-              <Pencil className="mr-2 h-4 w-4" />
-              {t("common.edit")}
-            </DropdownMenuItem>
+      {/* The action cluster wraps to its own line on a narrow row so the
+          tag name keeps a readable floor instead of truncating away. */}
+      <div className="ml-auto flex shrink-0 items-center gap-1">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-11 sm:size-9"
+          onClick={() => onToggleVisibility(tag)}
+          disabled={disabled}
+          aria-pressed={tag.custom ? undefined : isHidden}
+          aria-label={`${
+            tag.custom
+              ? t("mood.manage.archive")
+              : isHidden
+                ? t("mood.manage.showTag")
+                : t("mood.manage.hideTag")
+          } — ${name}`}
+          title={
+            tag.custom
+              ? t("mood.manage.archive")
+              : isHidden
+                ? t("mood.manage.showTag")
+                : t("mood.manage.hideTag")
+          }
+        >
+          {tag.custom ? (
+            <Archive className="h-4 w-4" aria-hidden="true" />
+          ) : isHidden ? (
+            <EyeOff className="h-4 w-4" aria-hidden="true" />
+          ) : (
+            <Eye className="h-4 w-4" aria-hidden="true" />
           )}
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <FolderInput className="mr-2 h-4 w-4" />
-              {t("mood.manage.moveToGroup")}
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                {groupOptions
-                  .filter((group) => group.key !== groupKey)
-                  .map((group) => (
-                    <DropdownMenuItem
-                      key={group.key}
-                      onClick={() => onMoveToGroup(tag, group.key)}
-                    >
-                      {group.name}
-                    </DropdownMenuItem>
-                  ))}
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          {tag.custom && (
-            <DropdownMenuItem onClick={() => onToggleVisibility(tag)}>
-              <Archive className="mr-2 h-4 w-4" />
-              {t("mood.manage.archive")}
-            </DropdownMenuItem>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-11 sm:size-9"
+          onClick={() => onMove(groupKey, tag.key, -1)}
+          disabled={index === 0 || disabled}
+          aria-label={`${t("mood.manage.moveUp")} — ${name}`}
+        >
+          <ArrowUp className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-11 sm:size-9"
+          onClick={() => onMove(groupKey, tag.key, 1)}
+          disabled={index === total - 1 || disabled}
+          aria-label={`${t("mood.manage.moveDown")} — ${name}`}
+        >
+          <ArrowDown className="h-4 w-4" />
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-11 sm:size-9"
+              aria-label={`${t("common.moreOptions")} — ${name}`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {tag.custom && (
+              <DropdownMenuItem onClick={() => onEdit(tag)}>
+                <Pencil className="mr-2 h-4 w-4" />
+                {t("common.edit")}
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <FolderInput className="mr-2 h-4 w-4" />
+                {t("mood.manage.moveToGroup")}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  {groupOptions
+                    .filter((group) => group.key !== groupKey)
+                    .map((group) => (
+                      <DropdownMenuItem
+                        key={group.key}
+                        onClick={() => onMoveToGroup(tag, group.key)}
+                      >
+                        {group.name}
+                      </DropdownMenuItem>
+                    ))}
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+            {tag.custom && (
+              <DropdownMenuItem onClick={() => onToggleVisibility(tag)}>
+                <Archive className="mr-2 h-4 w-4" />
+                {t("mood.manage.archive")}
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </div>
   );
 }
diff --git a/src/components/ui/responsive-sheet.tsx b/src/components/ui/responsive-sheet.tsx
index e212b3358..d302c99af 100644
--- a/src/components/ui/responsive-sheet.tsx
+++ b/src/components/ui/responsive-sheet.tsx
@@ -180,7 +180,7 @@ export function ResponsiveSheet({
           {footer ? (
             <SheetFooter
               data-slot="responsive-sheet-footer"
-              className="border-border/70 bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky bottom-0 mt-0 flex-row justify-end gap-2 border-t p-4 backdrop-blur"
+              className="border-border/70 bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky bottom-0 mt-0 flex-row justify-end gap-2 border-t p-4 pb-[calc(env(safe-area-inset-bottom,0px)+1rem)] backdrop-blur"
             >
               {footer}
             </SheetFooter>