CRITICAL FIX: Override .detail-closed specificity at mobile

Root cause: The .app-layout.detail-closed class (2-class specificity)
was overriding .app-layout (1-class specificity) at mobile, creating
a 3-column grid "0 1fr 0" instead of single column "1fr".

The task-pane was placed in column 1 (0 width), making it invisible.

Fix: Explicitly override both .app-layout and .app-layout.detail-closed
with equal specificity in the 768px breakpoint.

Cache bust: v=6

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

static/css/app.css

@@ -857,6 +857,34 @@ a:hover {
     font-size: var(--font-sm);
 }
 
+/* Sidebar toggle button (hidden on desktop, shown on mobile) */
+.sidebar-toggle {
+    display: none;
+    background: none;
+    border: none;
+    padding: var(--space-sm);
+    cursor: pointer;
+    color: var(--text-secondary);
+}
+
+.sidebar-toggle svg {
+    width: 24px;
+    height: 24px;
+}
+
+/* Mobile overlay */
+.mobile-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 40;
+}
+
+.mobile-overlay.visible {
+    display: block;
+}
+
 /* ============================================
    Mobile Responsive
    ============================================ */
@@ -886,19 +914,53 @@ a:hover {
         --sidebar-width: 0;
     }
 
-    .app-layout {
+    /* Override both app-layout variants to use single column */
+    .app-layout,
+    .app-layout.detail-closed {
         grid-template-columns: 1fr;
     }
 
+    /* Explicit grid positioning for mobile */
+    .app-header {
+        grid-row: 1;
+        grid-column: 1;
+        padding: var(--space-sm) var(--space-md);
+    }
+
+    /* Force task pane into the single column with full width */
+    .task-pane {
+        grid-row: 2;
+        grid-column: 1;
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .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;
+        width: 280px; /* Slightly wider for touch targets */
-        z-index: 50;
+        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,40 +971,128 @@ 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;
     }
-}
 
-/* Sidebar toggle button (visible on mobile) */
+    .form-group {
-.sidebar-toggle {
+        margin-bottom: var(--space-md);
-    display: none;
+    }
-    background: none;
+
-    border: none;
+    /* Task list mobile optimization */
+    .task-item {
         padding: var(--space-sm);
-    cursor: pointer;
+    }
-    color: var(--text-secondary);
-}
 
-.sidebar-toggle svg {
+    .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;
+    }
 }
 
-/* Mobile overlay */
+/* Very small phones breakpoint */
-.mobile-overlay {
+@media (max-width: 480px) {
+    .app-header {
+        padding: var(--space-xs) var(--space-sm);
+    }
+
+    .app-brand {
+        font-size: 0.9rem;
+    }
+
+    .app-sidebar {
+        width: 260px; /* Narrower on very small screens */
+    }
+
+    /* Smaller buttons on very small screens */
+    .header-user .btn {
+        font-size: 0.75rem;
+        padding: var(--space-xs) var(--space-sm);
+        min-height: 36px;
+    }
+
+    .theme-toggle {
+        min-width: 40px;
+        min-height: 40px;
+    }
+
+    .sidebar-toggle {
+        min-width: 40px;
+        min-height: 40px;
+    }
+}
+
+/* Mobile utility classes base definitions */
+.mobile-only {
     display: none;
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 40;
 }
 
-.mobile-overlay.visible {
+.desktop-only {
     display: block;
 }
 

templates/base.html

@@ -10,7 +10,7 @@
     <link rel="icon" type="image/svg+xml" href="{% static 'favicons/favicon.svg' %}">
     <link rel="alternate icon" href="{% static 'favicons/favicon.svg' %}" type="image/svg+xml">
 
-    <link rel="stylesheet" href="{% static 'css/app.css' %}">
+    <link rel="stylesheet" href="{% static 'css/app.css' %}?v=6">
     {% block extra_css %}{% endblock %}
 </head>
 <body>