From 8b714470246787128abf7b2aa6877f51047972c5 Mon Sep 17 00:00:00 2001 From: Keith Smith Date: Fri, 26 Dec 2025 21:30:06 -0700 Subject: [PATCH] Fix task pane layout at mobile - add explicit grid positioning MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The task-pane was not displaying at mobile because it lacked explicit grid positioning and width constraints. Added: - grid-row: 2 and grid-column: 1 for explicit placement - width: 100%, min-width: 0, max-width: 100% to ensure full width - Moved header grid positioning into mobile breakpoint for clarity Also updated header to have explicit grid-row: 1 positioning. Cache bust: v=5 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- static/css/app.css | 13 ++++++++++++- templates/base.html | 2 +- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/static/css/app.css b/static/css/app.css index 3b0fa09..b45a46c 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -918,11 +918,22 @@ a:hover { grid-template-columns: 1fr; } - /* Header mobile optimization */ + /* 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 */ } diff --git a/templates/base.html b/templates/base.html index 9b1c232..70199b2 100644 --- a/templates/base.html +++ b/templates/base.html @@ -10,7 +10,7 @@ - + {% block extra_css %}{% endblock %}