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,15 +21,13 @@ 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="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-14">
+        <div className="flex items-center gap-1 min-h-14 py-2">
-          <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>
-      </div>
     </nav>
   )
 }

frontend/src/pages/Dashboard.tsx

@@ -146,7 +146,7 @@ function MealSlot({
             ref={provided.innerRef}
             {...provided.droppableProps}
             className={`
-            rounded-lg p-1 min-h-[80px] transition-colors
+              rounded-lg p-1 min-h-[20px] md:min-h-[80px] transition-colors
               ${snapshot.isDraggingOver ? 'bg-primary-50 ring-2 ring-primary-300' : 'bg-transparent'}
             `}
           >
@@ -169,7 +169,7 @@ function MealSlot({
                 )}
               </Draggable>
             ) : (
-            <div className="h-16 rounded-xl border-2 border-dashed border-surface-200 flex flex-col items-center justify-center gap-1">
+              <div className="hidden md:flex h-16 rounded-xl border-2 border-dashed border-surface-200 flex-col items-center justify-center gap-1">
                 <span className="text-xs text-surface-300">Empty</span>
                 {onGenerate && (
                   <button
@@ -222,7 +222,7 @@ function DayColumn({
           {MEAL_TYPES.map(mealType => {
             const item = items.find(i => i.meal_type === mealType)
             return (
-            <div key={mealType}>
+              <div key={mealType} className={item ? '' : 'hidden md:block'}>
                 <span className="text-[9px] font-medium text-surface-400 uppercase tracking-wider px-1 block">
                   {mealType}
                 </span>
@@ -242,9 +242,6 @@ function DayColumn({
     )
   }
 
-/* ------------------------------------------------------------------ */
-/*  Skeleton                                                            */
-/* ------------------------------------------------------------------ */
   function DashboardSkeleton() {
     return (
       <div className="space-y-6 animate-fade-in">
@@ -255,13 +252,13 @@ function DashboardSkeleton() {
             <Skeleton className="h-7 w-20" />
           </div>
         </div>
-      <div className="grid grid-cols-7 gap-2">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2">
           {Array.from({ length: 7 }).map((_, i) => (
             <div key={i} className="space-y-2">
               <Skeleton className="h-8 w-full" />
-            <SkeletonCard />
+              <div className="hidden sm:block"><SkeletonCard /></div>
-            <SkeletonCard />
+              <div className="hidden sm:block"><SkeletonCard /></div>
-            <SkeletonCard />
+              <div className="hidden sm:block"><SkeletonCard /></div>
             </div>
           ))}
         </div>
@@ -431,7 +428,7 @@ export default function Dashboard() {
         </CardHeader>
         <CardBody>
           <DragDropContext onDragEnd={onDragEnd}>
-            <div className="grid grid-cols-7 gap-2">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2">
               {itemsByDay.map((items, index) => (
               <DayColumn
                 key={index}

frontend/src/pages/MealDetail.tsx

@@ -170,34 +170,34 @@ export default function MealDetail() {
           <img
             src={recipe.image_url}
             alt={recipe.name}
-            className="w-full h-72 object-cover opacity-90"
+            className="w-full h-48 sm:h-72 object-cover opacity-90"
           />
         ) : (
-          <div className="h-72 flex items-center justify-center">
+          <div className="h-48 sm:h-72 flex items-center justify-center">
             <ChefHat className="w-16 h-16 text-surface-600" />
           </div>
         )}
         <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
-        <div className="absolute bottom-0 left-0 right-0 p-6">
+        <div className="absolute bottom-0 left-0 right-0 p-4 sm:p-6">
-          <div className="flex items-end justify-between gap-4">
+          <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
             <div>
-              <h1 className="text-3xl font-bold text-white">{recipe.name}</h1>
+                <h1 className="text-xl sm:text-3xl font-bold text-white">{recipe.name}</h1>
               {recipe.description && (
-                <p className="text-white/80 mt-1 max-w-xl text-sm">{recipe.description}</p>
+                <p className="text-white/80 mt-1 max-w-xl text-xs sm:text-sm">{recipe.description}</p>
               )}
             </div>
-            <div className="text-right flex-shrink-0">
+            <div className="text-left sm:text-right flex-shrink-0">
-              <div className="text-2xl font-bold text-white">
+              <div className="text-xl sm:text-2xl font-bold text-white">
                 ${item.estimated_cost?.toFixed(2) || 'N/A'}
               </div>
-              <div className="text-sm text-white/70">per serving</div>
+              <div className="text-xs sm:text-sm text-white/70">per serving</div>
             </div>
           </div>
         </div>
       </div>
 
       {/* Metadata Row */}
-      <div className="flex flex-wrap items-center gap-4">
+      <div className="flex flex-wrap items-center gap-3">
         {totalTime > 0 && (
           <div className="flex items-center gap-1.5 text-sm text-surface-600 bg-surface-100 px-3 py-1.5 rounded-lg">
             <Clock className="w-4 h-4 text-surface-500" />