Fix task pane layout at mobile - add explicit grid positioning

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 <noreply@anthropic.com>
This commit is contained in:
Keith Smith
2025-12-26 21:30:06 -07:00
co-authored by Claude Sonnet 4.5
parent f836769ad7
commit 8b71447024
2 changed files with 13 additions and 2 deletions
+12 -1
View File
@@ -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 */
}
+1 -1
View File
@@ -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' %}?v=4">
<link rel="stylesheet" href="{% static 'css/app.css' %}?v=5">
{% block extra_css %}{% endblock %}
</head>
<body>