feat: mobile-friendly UI overhaul

- Bottom navigation bar on mobile instead of sidebar
- Sheet-style modals (slide up from bottom) on small screens
- Larger touch targets for shopping list checkboxes
- Stacked ingredient form inputs for mobile usability
- Responsive header buttons with short labels on small screens
- Safe-area support for notched phones
- Reduced padding on mobile for better space usage

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-16 07:41:04 +00:00
parent a5471276e8
commit 416c6ed7c7
7 changed files with 109 additions and 103 deletions

View File

@@ -3,7 +3,9 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#09090b" />
<title>Mealplanner</title>
</head>
<body>