CSS Fix view

Aberwyn/Views/Meal/View.cshtml

@@ -336,4 +336,56 @@
         flex: 2 0 60%;
     }
 
+    @@media (max-width: 768px) {
+    .meal-container {
+        padding: 1rem;
+    }
+
+    .meal-header {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .meal-meta {
+        width: 100%;
+    }
+
+    .meal-title {
+        font-size: 2rem;
+    }
+
+    .meal-image {
+        width: 100%;
+        max-width: 300px;
+        height: auto;
+    }
+
+    .form-control {
+        font-size: 1rem;
+    }
+
+    .ingredient-row {
+        flex-direction: column;
+    }
+
+    .ingredient-qty,
+    .ingredient-item {
+        flex: 1 0 auto;
+        width: 100%;
+    }
+
+    .btn,
+    .btn-outline {
+        width: 100%;
+        margin: 0.25rem 0;
+    }
+
+    .buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+}
+
 </style>