From 7af88328c8388423d26b99c0152e34c5d4c64cbe Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sat, 28 Mar 2026 15:54:12 -0400
Subject: [PATCH] feat: mobile-responsive layout under 640px

Single breakpoint, no desktop changes. Key adjustments:
- Reset zoom: 1 (mobile browsers handle scaling)
- Padding drops from 32px to 16px throughout
- Toolbar wraps: search full-width, filters below
- Instance grid and detail grid collapse to single column
- Detail header stacks title above action buttons
- History timeline stacks timestamp above event
- Toggle grid drops from 3 to 2 columns
- Confirm box gets max-width: calc(100vw - 32px) to prevent overflow
- Toast stretches across bottom of screen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 css/app.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/css/app.css b/css/app.css
index 3779d19..096a54a 100644
--- a/css/app.css
+++ b/css/app.css
@@ -712,3 +712,55 @@ select:focus { border-color: var(--accent); }
   0%, 100% { opacity: 1; }
   50%       { opacity: 0; }
 }
+
+/* ── MOBILE ── */
+@media (max-width: 640px) {
+  /* Reset desktop zoom — mobile browsers handle scaling themselves */
+  html { zoom: 1; }
+
+  /* Nav */
+  nav { padding: 0 16px; }
+
+  /* Dashboard header */
+  .dash-header { padding: 18px 16px 14px; }
+
+  /* Stats bar */
+  .stat-cell { padding: 10px 16px; }
+
+  /* Toolbar — search full-width on first row, filters + button below */
+  .toolbar    { flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
+  .search-wrap { max-width: 100%; }
+  .toolbar-right { margin-left: 0; width: 100%; justify-content: flex-end; }
+
+  /* Instance grid — single column */
+  .instance-grid {
+    grid-template-columns: 1fr;
+    padding: 12px 16px;
+    gap: 8px;
+  }
+
+  /* Detail page */
+  .detail-page { padding: 16px; }
+
+  /* Detail header — stack title block above actions */
+  .detail-header { flex-direction: column; align-items: flex-start; gap: 14px; }
+
+  /* Detail sub — wrap items when they don't fit */
+  .detail-sub { flex-wrap: wrap; row-gap: 4px; }
+
+  /* Detail grid — single column */
+  .detail-grid { grid-template-columns: 1fr; }
+
+  /* Toggle grid — 2 columns instead of 3 */
+  .toggle-grid { grid-template-columns: 1fr 1fr; }
+
+  /* Confirm box — no fixed width on mobile */
+  .confirm-box { width: auto; max-width: calc(100vw - 32px); padding: 18px; }
+
+  /* History timeline — stack timestamp above event */
+  .tl-item  { flex-direction: column; align-items: flex-start; gap: 3px; }
+  .tl-time  { order: -1; }
+
+  /* Toast — stretch across bottom */
+  .toast { right: 16px; left: 16px; bottom: 16px; }
+}