From 43fa1bac73e77b2c441e9bdb061c8d79bdf2bebb Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Wed, 4 Mar 2026 13:12:43 +0000
Subject: [PATCH] =?UTF-8?q?fix(app):=20iOS=20HIG=20Phase=206=20=E2=80=94?=
 =?UTF-8?q?=20modals,=20dialogs=20&=20overlays?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PassphraseDialog: submit button h-10→h-11 (44px)
- ShareToNostr: close/cancel/publish buttons expanded to 44px
- ComparisonView: tab buttons min-h-[44px], gap-1→gap-2
- NostrProfileEditor: publish button min-h-[44px]
- NostrRelayManager: all action buttons expanded to 44px
- ChatHistory: conversation items min-h-[44px]

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 loop/plan.md                                       |  8 ++++----
 packages/app/src/components/chat/ChatHistory.vue   |  4 ++--
 .../app/src/components/chat/ComparisonView.vue     |  4 ++--
 .../src/components/content/NostrProfileEditor.vue  |  2 +-
 .../src/components/content/NostrRelayManager.vue   | 14 +++++++-------
 .../app/src/components/content/ShareToNostr.vue    |  8 ++++----
 .../app/src/components/ui/PassphraseDialog.vue     |  2 +-
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/loop/plan.md b/loop/plan.md
index 7f1e8d7e..6ae0c031 100644
--- a/loop/plan.md
+++ b/loop/plan.md
@@ -54,13 +54,13 @@
 
 ## Phase 5: Glass Button System & Utility Classes
 
-- [ ] **T17** — Update `.glass-button` and `.glass-button-sm` in `packages/app/src/styles/main.css` to enforce 44px minimum height on mobile. Add a responsive rule: on screens ≤ 768px, `.glass-button` gets `min-height: 48px` and `.glass-button-sm` gets `min-height: 44px`. This catches all uses of these classes automatically. On desktop they stay as-is.
+- [x] **T17** — Update `.glass-button` and `.glass-button-sm` in `packages/app/src/styles/main.css` to enforce 44px minimum height on mobile. Add a responsive rule: on screens ≤ 768px, `.glass-button` gets `min-height: 48px` and `.glass-button-sm` gets `min-height: 44px`. This catches all uses of these classes automatically. On desktop they stay as-is.
 
-- [ ] **T18** — Audit all `!h-7 !min-h-0` overrides. These force 28px height, defeating the glass button minimum. Search all `.vue` files for `!h-7` and `!min-h-0`. Replace with mobile-responsive approach: keep desktop size but ensure 44px minimum on mobile using `min-h-[44px] md:min-h-0`.
+- [x] **T18** — Audit all `!h-7 !min-h-0` overrides. These force 28px height, defeating the glass button minimum. Search all `.vue` files for `!h-7` and `!min-h-0`. Replace with mobile-responsive approach: keep desktop size but ensure 44px minimum on mobile using `min-h-[44px] md:min-h-0`.
 
-- [ ] **T19** — Add a `.touch-target` utility class to `main.css`: `.touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }`. Then refactor at least 15 icon buttons across the app to use this class instead of manual min-w/min-h. This creates a reusable pattern for future development.
+- [x] **T19** — Add a `.touch-target` utility class to `main.css`: `.touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }`. Then refactor at least 15 icon buttons across the app to use this class instead of manual min-w/min-h. This creates a reusable pattern for future development.
 
-- [ ] **TEST:P5** — Run `pnpm typecheck && pnpm lint && pnpm test`. Commit and push.
+- [x] **TEST:P5** — Run `pnpm typecheck && pnpm lint && pnpm test`. Commit and push.
 
 ## Phase 6: Modals, Dialogs & Overlays
 
diff --git a/packages/app/src/components/chat/ChatHistory.vue b/packages/app/src/components/chat/ChatHistory.vue
index b872be75..3ef8a152 100644
--- a/packages/app/src/components/chat/ChatHistory.vue
+++ b/packages/app/src/components/chat/ChatHistory.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex-1 min-h-0 overflow-y-auto scrollbar-hide p-3 space-y-1">
     <button
-      class="w-full text-left px-3 py-2.5 rounded-xl transition-all duration-150 hover:bg-white/5 flex items-center gap-2 text-white/70 mb-2"
+      class="w-full text-left px-3 py-2.5 min-h-[44px] rounded-xl transition-all duration-150 hover:bg-white/5 flex items-center gap-2 text-white/70 mb-2"
       @click="$emit('newChat')"
     >
       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -17,7 +17,7 @@
     <button
       v-for="conv in conversations"
       :key="conv.id"
-      class="w-full text-left px-3 py-2.5 rounded-xl transition-all duration-150"
+      class="w-full text-left px-3 py-2.5 min-h-[44px] rounded-xl transition-all duration-150"
       :class="conv.id === activeId ? 'nav-tab-active' : 'hover:bg-white/5'"
       @click="selectConversation(conv.id)"
     >
diff --git a/packages/app/src/components/chat/ComparisonView.vue b/packages/app/src/components/chat/ComparisonView.vue
index 3d0c0eab..182cfe03 100644
--- a/packages/app/src/components/chat/ComparisonView.vue
+++ b/packages/app/src/components/chat/ComparisonView.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col h-full">
     <!-- Mobile tabs -->
-    <div class="flex md:hidden gap-1 px-3 pt-2">
+    <div class="flex md:hidden gap-2 px-3 pt-2">
       <button
         v-for="(tab, i) in tabs"
         :key="i"
-        class="flex-1 text-xs py-1.5 rounded-lg transition-all"
+        class="flex-1 text-sm min-h-[44px] rounded-lg transition-all"
         :class="activeTab === i
           ? 'bg-accent/20 text-accent'
           : 'text-white/50 hover:text-white/70'"
diff --git a/packages/app/src/components/content/NostrProfileEditor.vue b/packages/app/src/components/content/NostrProfileEditor.vue
index b0ff95e0..8822af43 100644
--- a/packages/app/src/components/content/NostrProfileEditor.vue
+++ b/packages/app/src/components/content/NostrProfileEditor.vue
@@ -115,7 +115,7 @@
 
         <!-- Publish button -->
         <button
-          class="w-full py-2.5 rounded-lg text-xs font-medium bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
+          class="w-full min-h-[44px] rounded-lg text-sm font-medium bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
           :disabled="isPublishing"
           @click="publishProfile"
         >
diff --git a/packages/app/src/components/content/NostrRelayManager.vue b/packages/app/src/components/content/NostrRelayManager.vue
index 00d75724..17b8d4aa 100644
--- a/packages/app/src/components/content/NostrRelayManager.vue
+++ b/packages/app/src/components/content/NostrRelayManager.vue
@@ -13,7 +13,7 @@
           @keydown.enter="addNewRelay"
         />
         <button
-          class="px-3 py-2 rounded-lg text-xs bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
+          class="px-4 min-h-[44px] rounded-lg text-sm bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
           :disabled="!newRelayUrl.trim()"
           @click="addNewRelay"
         >
@@ -51,9 +51,9 @@
         </div>
 
         <!-- Controls -->
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 flex-wrap">
           <button
-            class="text-xs px-2 py-1 rounded transition-colors"
+            class="text-sm px-3 min-h-[44px] rounded-lg transition-colors"
             :class="relay.read
               ? 'bg-accent/15 text-accent/80'
               : 'bg-white/5 text-white/30 hover:text-white/50'"
@@ -62,7 +62,7 @@
             Read
           </button>
           <button
-            class="text-xs px-2 py-1 rounded transition-colors"
+            class="text-sm px-3 min-h-[44px] rounded-lg transition-colors"
             :class="relay.write
               ? 'bg-accent/15 text-accent/80'
               : 'bg-white/5 text-white/30 hover:text-white/50'"
@@ -72,14 +72,14 @@
           </button>
           <div class="flex-1" />
           <button
-            class="text-xs px-2 py-1 rounded bg-white/5 text-white/30 hover:text-white/50 transition-colors"
+            class="text-sm px-3 min-h-[44px] rounded-lg bg-white/5 text-white/30 hover:text-white/50 transition-colors"
             :disabled="testingRelay === relay.url"
             @click="testConnection(relay.url)"
           >
             {{ testingRelay === relay.url ? 'Testing...' : 'Test' }}
           </button>
           <button
-            class="text-xs px-2 py-1 rounded bg-white/5 text-red-400/50 hover:text-red-400/80 hover:bg-red-400/10 transition-colors"
+            class="text-sm px-3 min-h-[44px] rounded-lg bg-white/5 text-red-400/50 hover:text-red-400/80 hover:bg-red-400/10 transition-colors"
             @click="removeRelay(relay.url)"
           >
             Remove
@@ -99,7 +99,7 @@
       <!-- Import NIP-65 -->
       <div v-if="isLoggedIn" class="mt-4 pt-4 border-t border-white/5">
         <button
-          class="w-full text-left px-3 py-2 rounded-lg text-xs bg-white/5 text-white/40 hover:text-white/60 hover:bg-white/10 transition-colors"
+          class="w-full text-left px-3 min-h-[44px] rounded-lg text-sm bg-white/5 text-white/40 hover:text-white/60 hover:bg-white/10 transition-colors"
           :disabled="isImporting"
           @click="importFromNIP65"
         >
diff --git a/packages/app/src/components/content/ShareToNostr.vue b/packages/app/src/components/content/ShareToNostr.vue
index 033a636d..4a24df34 100644
--- a/packages/app/src/components/content/ShareToNostr.vue
+++ b/packages/app/src/components/content/ShareToNostr.vue
@@ -4,10 +4,10 @@
       <div class="flex items-center justify-between">
         <h3 class="text-sm font-bold text-white/90">Share to Nostr</h3>
         <button
-          class="p-1.5 rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
+          class="p-2 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
           @click="close"
         >
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
@@ -26,13 +26,13 @@
 
       <div class="flex gap-2">
         <button
-          class="flex-1 py-2.5 rounded-lg text-xs font-medium text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
+          class="flex-1 min-h-[44px] rounded-lg text-sm font-medium text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
           @click="close"
         >
           Cancel
         </button>
         <button
-          class="flex-1 py-2.5 rounded-lg text-xs font-medium bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
+          class="flex-1 min-h-[44px] rounded-lg text-sm font-medium bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
           :disabled="isPublishing || !isLoggedIn"
           @click="publish"
         >
diff --git a/packages/app/src/components/ui/PassphraseDialog.vue b/packages/app/src/components/ui/PassphraseDialog.vue
index 9a0cf8f0..ae3e003c 100644
--- a/packages/app/src/components/ui/PassphraseDialog.vue
+++ b/packages/app/src/components/ui/PassphraseDialog.vue
@@ -68,7 +68,7 @@
             Skip
           </button>
           <button
-            class="glass-button flex-1 h-10 rounded-xl text-sm font-medium text-white transition-opacity"
+            class="glass-button flex-1 h-11 rounded-xl text-sm font-medium text-white transition-opacity"
             :disabled="!canSubmit"
             :class="{ 'opacity-40 cursor-not-allowed': !canSubmit }"
             @click="handleSubmit"