From 4464d2c9b9dda4bac9ea3832fa37f3d45b7e7ec0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 18:48:07 +0200
Subject: [PATCH] chore(charts,errors): apply the tap-target floor across
 charts and error chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Final surface sweep for the v1.4.27 tap-target work: the chart band
overlay, the error-details action row, and the public-page header
links.

- `health-chart.tsx`: band overlay used to inset `right: 18px` while
  the underlying ComposedChart margin is `right: 8`, so the colour
  band drifted left of the plotted line by 10 px on every viewport.
  Pin the overlay to the chart's actual right edge.
- `error-details.tsx`: drop `size="sm"` from the retry, copy, and
  report-issue buttons so they sit at the default 40 px primitive
  height — clears the WCAG 2.5.5 floor on touch.
- `auth/login/page.tsx`: back-to-passkey toggle wraps in `inline-flex
  min-h-11 w-full` so the form-mode swap is reachable on touch.
- `privacy/page.tsx` and `about/page.tsx`: header HealthLog + Sign-in
  links wrap in `inline-flex min-h-11` so the public-page chrome
  clears the floor.
---
 src/app/about/page.tsx                 | 4 ++--
 src/app/auth/login/page.tsx            | 2 +-
 src/app/privacy/page.tsx               | 4 ++--
 src/components/charts/health-chart.tsx | 8 +++++++-
 src/components/error-details.tsx       | 6 +++---
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 6873fcc6a..0fda9a5ff 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -60,13 +60,13 @@ export default function AboutPage() {
         <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3 md:px-6">
           <Link
             href="/"
-            className="text-foreground hover:text-primary text-sm font-semibold tracking-tight"
+            className="text-foreground hover:text-primary inline-flex min-h-11 items-center text-sm font-semibold tracking-tight"
           >
             HealthLog
           </Link>
           <Link
             href="/auth/login"
-            className="text-muted-foreground hover:text-foreground text-sm"
+            className="text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center text-sm"
           >
             Sign in
           </Link>
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index adaefb661..f04918a38 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -224,7 +224,7 @@ export default function LoginPage() {
               <button
                 type="button"
                 onClick={() => setMode("passkey")}
-                className="text-muted-foreground hover:text-foreground w-full text-center text-xs"
+                className="text-muted-foreground hover:text-foreground inline-flex min-h-11 w-full items-center justify-center text-center text-xs"
               >
                 {t("auth.backToPasskey")}
               </button>
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index 7a9b1a10b..ef28852c3 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -111,13 +111,13 @@ export default function PrivacyPage() {
         <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3 md:px-6">
           <Link
             href="/"
-            className="text-foreground hover:text-primary text-sm font-semibold tracking-tight"
+            className="text-foreground hover:text-primary inline-flex min-h-11 items-center text-sm font-semibold tracking-tight"
           >
             HealthLog
           </Link>
           <Link
             href="/auth/login"
-            className="text-muted-foreground hover:text-foreground text-sm"
+            className="text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center text-sm"
           >
             Sign in
           </Link>
diff --git a/src/components/charts/health-chart.tsx b/src/components/charts/health-chart.tsx
index 5da206e54..2d24b666e 100644
--- a/src/components/charts/health-chart.tsx
+++ b/src/components/charts/health-chart.tsx
@@ -1172,11 +1172,17 @@ export function HealthChart({
       ) : (
         <div className={`relative ${chartHeightClass}`}>
           {visibleBands.length > 0 ? (
+            // v1.4.27 R3d MB2 — band overlay positioning fix. The
+            // overlay used to inset `right: 18px` while the chart
+            // margin is `right: 8`, so the band rectangle drifted left
+            // of the plotted line by 10 px on every viewport. Pin the
+            // overlay to the same right edge the ComposedChart uses so
+            // the band tracks the line exactly.
             <div
               className="pointer-events-none absolute"
               style={{
                 left: `${8 + yAxisWidth}px`,
-                right: "18px",
+                right: "8px",
                 top: "10px",
                 bottom: "32px",
                 zIndex: 0,
diff --git a/src/components/error-details.tsx b/src/components/error-details.tsx
index d8b37eb22..1653a8c14 100644
--- a/src/components/error-details.tsx
+++ b/src/components/error-details.tsx
@@ -84,12 +84,12 @@ export function ErrorDetails({
       </div>
       <div className="flex flex-wrap items-center gap-2">
         {reset && (
-          <Button onClick={reset} variant="outline" size="sm">
+          <Button onClick={reset} variant="outline">
             <RotateCcw className="mr-2 h-4 w-4" />
             {t("common.retry")}
           </Button>
         )}
-        <Button onClick={handleCopy} variant="outline" size="sm">
+        <Button onClick={handleCopy} variant="outline">
           {copied ? (
             <CheckCircle2 className="text-dracula-green mr-2 h-4 w-4" />
           ) : (
@@ -98,7 +98,7 @@ export function ErrorDetails({
           {copied ? t("common.copied") : t("common.copyDetails")}
         </Button>
         {bugReportEnabled && (
-          <Button asChild variant="outline" size="sm">
+          <Button asChild variant="outline">
             <Link href={reportHref}>
               <Bug className="mr-2 h-4 w-4" />
               {t("common.reportIssue")}