From 09dbb4b199635accd0a06bca5ec5d6f4875d2133 Mon Sep 17 00:00:00 2001 From: ScreenTinker Date: Tue, 21 Apr 2026 15:49:49 -0500 Subject: [PATCH] Mobile: sidebar polish (Commit 1/4) - Move hamburger click + backdrop click out of inline onclick into app.js - Add aria-label/aria-expanded/aria-controls to hamburger button - Close drawer on Escape keypress - Bump hamburger button to 44px, nav-link min-height to 44px (tap targets) - Bump .content top padding to 68px on mobile to match 44px hamburger Co-Authored-By: Claude Opus 4.7 --- frontend/css/main.css | 7 ++++--- frontend/index.html | 6 +++--- frontend/js/app.js | 23 +++++++++++++++++++---- 3 files changed, 26 insertions(+), 10 deletions(-) diff --git a/frontend/css/main.css b/frontend/css/main.css index bfaf324..df19ee6 100644 --- a/frontend/css/main.css +++ b/frontend/css/main.css @@ -885,8 +885,8 @@ body { top: 12px; left: 12px; z-index: 200; - width: 40px; - height: 40px; + width: 44px; + height: 44px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); @@ -915,7 +915,8 @@ body { z-index: 140; } .sidebar-backdrop.open { display: block; } - .content { margin-left: 0; padding: 16px; padding-top: 60px; } + .nav-link { min-height: 44px; padding: 10px 14px; } + .content { margin-left: 0; padding: 16px; padding-top: 68px; } .page-header { flex-direction: column; gap: 12px; align-items: flex-start; } .device-grid { grid-template-columns: 1fr; } .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } diff --git a/frontend/index.html b/frontend/index.html index 6374403..94a6eac 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -17,11 +17,11 @@ - - -