From dd70dd535595069981fff39b62163f55658aa9bf Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 9 Jun 2026 22:41:36 +0000
Subject: [PATCH] fix(ui): vertically center routine title on touch devices
 (PAP-10748)

On coarse-pointer devices the global min-height:44px touch floor stretched
the auto-resizing title textarea; since textarea content is top-aligned, the
single line of title text was pushed to the top of the bar (too high on
mobile Safari). Opt the title field out of the floor via data-autosize-title
(its 56px bar already supplies the touch area) so items-center can center it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ui/src/index.css               | 6 +++++-
 ui/src/pages/RoutineDetail.tsx | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index 340fff5c398..93e1660cbde 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -222,7 +222,11 @@
   [data-size="icon-xs"],
   [data-size="icon-sm"],
   input[type="checkbox"],
-  input[type="radio"] {
+  input[type="radio"],
+  /* Auto-resizing title fields are vertically centered inside their own bar,
+     which already provides the touch area; the 44px floor would top-align the
+     single line of text and push it too high (notably on mobile Safari). */
+  textarea[data-autosize-title] {
     min-height: 0;
   }
 }
diff --git a/ui/src/pages/RoutineDetail.tsx b/ui/src/pages/RoutineDetail.tsx
index 0c911fac0dd..ca7d54333a6 100644
--- a/ui/src/pages/RoutineDetail.tsx
+++ b/ui/src/pages/RoutineDetail.tsx
@@ -787,7 +787,8 @@ export function RoutineDetail() {
           <div className="flex min-w-0 flex-1 items-center gap-3">
             <textarea
               ref={titleInputRef}
-              className="min-w-0 flex-1 resize-none overflow-hidden bg-transparent text-base font-semibold outline-none placeholder:text-muted-foreground/50"
+              data-autosize-title
+              className="min-w-0 flex-1 resize-none overflow-hidden bg-transparent text-base font-semibold leading-7 outline-none placeholder:text-muted-foreground/50"
               placeholder="Routine title"
               rows={1}
               value={editDraft.title}