From b45d81cfaaf3c922a338d97d590bda7ecd75fcf6 Mon Sep 17 00:00:00 2001
From: ScreenTinker <hello@screentinker.com>
Date: Tue, 21 Apr 2026 15:51:12 -0500
Subject: [PATCH] Mobile: modals, forms, tap targets, toast (Commit 3/4)

- Buttons: min-height 44px (36px for .btn-sm, 40px for .btn-icon) on mobile
- Inputs/selects/textarea: font-size 16px (prevents iOS focus zoom), min-height 44px
- Pairing input: scaled letter-spacing down so 6 digits fit at 375px width
- Modals at 95vw: tighter header/body/footer padding so content breathes
- Toast container: bar-style full-width (left/right:12px) instead of
  fixed-right 280px that clipped below 400px viewports

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/css/main.css | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/frontend/css/main.css b/frontend/css/main.css
index 8adab0e..f5092fe 100644
--- a/frontend/css/main.css
+++ b/frontend/css/main.css
@@ -940,6 +940,40 @@ body {
   .schedule-controls > select { flex: 1 1 100%; }
   .schedule-controls > button,
   .schedule-controls > span { flex: 0 1 auto; }
+
+  /* Tap targets: minimum 44px height for interactive elements */
+  .btn { min-height: 44px; padding: 10px 16px; }
+  .btn-sm { min-height: 36px; padding: 8px 12px; }
+  .btn-icon { min-width: 40px; min-height: 40px; }
+
+  /* Form inputs: 16px font to prevent iOS focus zoom; 44px tap target */
+  .input,
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="url"],
+  input[type="search"],
+  input[type="tel"],
+  select,
+  textarea {
+    font-size: 16px;
+    min-height: 44px;
+  }
+  .pairing-input { font-size: 24px; letter-spacing: 6px; }
+
+  /* Modals: adjust padding at 95vw so content doesn't touch edges */
+  .modal-header,
+  .modal-footer { padding: 14px 16px; }
+  .modal-body { padding: 16px; }
+
+  /* Toast container: full-width bar instead of 280px fixed to right */
+  .toast-container {
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+  }
+  .toast { min-width: 0; width: 100%; }
 }
 
 @media (max-width: 480px) {