From d5010580a4bf217f47d909abbf311ef6ed3638f4 Mon Sep 17 00:00:00 2001
From: Keith Smith <keith@firebugit.com>
Date: Fri, 26 Dec 2025 21:01:17 -0700
Subject: [PATCH] Implement mobile responsive design improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed critical mobile layout issues on phones (400-600px width):

Header improvements:
- Hide email on mobile to save space
- Compact user menu layout
- Adjust brand font size for mobile
- Better spacing with adjusted padding

Sidebar drawer fixes:
- Properly hide sidebar off-screen (translateX(-100%))
- Increase z-index to 100 for proper layering
- Add background and shadow for drawer effect
- Wider drawer (280px) for better touch targets

Touch target improvements:
- All buttons minimum 44px height (Apple HIG standard)
- Larger touch areas for sidebar toggle and theme toggle
- Improved checkbox sizing (24px)

Task list mobile optimization:
- Smaller fonts for tags and priority badges
- Text ellipsis for long tag names
- Better wrapping for task metadata
- Reduced padding for mobile screens

Modal and form improvements:
- Full-width detail pane on mobile
- Responsive modal sizing (95% width, max 400px)
- Better form field spacing

New 480px breakpoint:
- Ultra-small phone optimization
- Vertical stack for Profile/Logout buttons
- Further reduced font sizes and padding

Mobile utility classes:
- .mobile-only / .desktop-only for conditional display
- .mobile-full-width for full-width elements

All changes are CSS-only, no JavaScript modifications needed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 static/css/app.css | 143 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 140 insertions(+), 3 deletions(-)

diff --git a/static/css/app.css b/static/css/app.css
index 2ae770b..afac155 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -890,15 +890,36 @@ a:hover {
         grid-template-columns: 1fr;
     }
 
+    /* Header mobile optimization */
+    .app-header {
+        padding: var(--space-sm) var(--space-md);
+    }
+
+    .header-user span {
+        display: none; /* Hide email on mobile */
+    }
+
+    .app-header-actions {
+        gap: var(--space-xs);
+    }
+
+    .app-brand {
+        font-size: 1.1rem; /* Slightly smaller on mobile */
+    }
+
+    /* Sidebar drawer - improved positioning */
     .app-sidebar {
         position: fixed;
         left: 0;
         top: var(--header-height);
         bottom: 0;
-        width: 260px;
-        z-index: 50;
+        width: 280px; /* Slightly wider for touch targets */
+        z-index: 100; /* Higher z-index */
         transform: translateX(-100%);
-        transition: transform var(--anim-normal);
+        transition: transform 0.3s ease-in-out;
+        background: var(--bg-primary);
+        box-shadow: var(--shadow-lg);
+        overflow-y: auto;
     }
 
     .app-sidebar.open {
@@ -909,13 +930,129 @@ a:hover {
         display: flex;
     }
 
+    /* Detail pane mobile */
     .detail-pane {
         width: 100%;
+        max-width: 100vw;
+        padding: var(--space-md);
     }
 
+    /* Forms */
     .form-row {
         grid-template-columns: 1fr;
     }
+
+    .form-group {
+        margin-bottom: var(--space-md);
+    }
+
+    /* Task list mobile optimization */
+    .task-item {
+        padding: var(--space-sm);
+    }
+
+    .task-meta {
+        flex-wrap: wrap;
+        gap: var(--space-xs);
+        font-size: 0.75rem;
+    }
+
+    .priority-badge {
+        font-size: 0.7rem;
+        padding: 2px 6px;
+    }
+
+    .tag {
+        font-size: 0.7rem;
+        padding: 2px 6px;
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    /* Touch targets - 44px minimum */
+    .task-item-checkbox {
+        width: 24px;
+        height: 24px;
+    }
+
+    .btn {
+        min-height: 44px;
+        padding: var(--space-sm) var(--space-md);
+    }
+
+    .sidebar-toggle {
+        min-width: 44px;
+        min-height: 44px;
+        padding: var(--space-sm);
+    }
+
+    .theme-toggle {
+        min-width: 44px;
+        min-height: 44px;
+    }
+
+    /* Modal on mobile */
+    .modal {
+        width: 95%;
+        max-width: 400px;
+        max-height: 90vh;
+        overflow-y: auto;
+    }
+
+    /* Mobile utility classes */
+    .mobile-only {
+        display: block;
+    }
+
+    .desktop-only {
+        display: none !important;
+    }
+
+    .mobile-full-width {
+        width: 100% !important;
+    }
+}
+
+/* Very small phones breakpoint */
+@media (max-width: 480px) {
+    .app-header {
+        padding: var(--space-xs) var(--space-sm);
+    }
+
+    .app-brand {
+        font-size: 1rem;
+    }
+
+    .btn {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: 0.875rem;
+    }
+
+    .app-sidebar {
+        width: 260px; /* Narrower on very small screens */
+    }
+
+    /* Stack Profile and Logout buttons vertically */
+    .header-user {
+        flex-direction: column;
+        gap: var(--space-xs);
+        align-items: stretch;
+    }
+
+    .header-user .btn {
+        width: 100%;
+        font-size: 0.8rem;
+    }
+}
+
+/* Mobile utility classes base definitions */
+.mobile-only {
+    display: none;
+}
+
+.desktop-only {
+    display: block;
 }
 
 /* Sidebar toggle button (visible on mobile) */