fix: improve mobile layout on meals page and navigation

- Dashboard: stack days vertically on mobile and suppress empty meal slots
- Nav: allow wrapping on narrow screens
- MealDetail: responsive hero sizing and padding

frontend/src/App.tsx

@@ -21,13 +21,11 @@ function Navigation() {
 
   return (
     <nav className="bg-white border-b border-surface-200 sticky top-0 z-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-14">
-          <div className="flex items-center space-x-1">
-            <Link to="/" className={linkClass('/')}>MealPlanner</Link>
-            <Link to="/pantry" className={linkClass('/pantry')}>Pantry</Link>
-            <Link to="/shopping-list" className={linkClass('/shopping-list')}>Shopping List</Link>
-          </div>
+      <div className="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">
+        <div className="flex items-center gap-1 min-h-14 py-2">
+          <Link to="/" className={linkClass('/')}>MealPlanner</Link>
+          <Link to="/pantry" className={linkClass('/pantry')}>Pantry</Link>
+          <Link to="/shopping-list" className={linkClass('/shopping-list')}>Shopping List</Link>
         </div>
       </div>
     </nav>