added info to meal

static/styles.css

@@ -100,6 +100,23 @@ h4 {
     flex-wrap: wrap;
 }
 
+.add-form textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+    resize: vertical;
+    min-height: 80px;
+}
+
+.add-form textarea:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+}
+
 input[type="text"],
 input[type="number"],
 input[type="date"],
@@ -202,14 +219,70 @@ button:hover {
 .meal-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     padding: 15px;
     background-color: #f8f9fa;
-    gap: 10px;
+    gap: 15px;
     flex-wrap: wrap;
 }
 
-.meal-header > div {
+.meal-image {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 8px;
+    border: 2px solid #e0e0e0;
+    flex-shrink: 0;
+}
+
+.meal-info-section {
+    flex: 1;
+    min-width: 200px;
+}
+
+.meal-info-section > div:first-child {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 5px;
+}
+
+.prep-time {
+    font-size: 13px;
+    color: #7f8c8d;
+    font-weight: 500;
+}
+
+.instructions-preview {
+    margin-top: 10px;
+}
+
+.instructions-preview summary {
+    cursor: pointer;
+    color: #3498db;
+    font-weight: 600;
+    font-size: 14px;
+    user-select: none;
+}
+
+.instructions-preview summary:hover {
+    text-decoration: underline;
+}
+
+.instructions-text {
+    margin-top: 8px;
+    padding: 10px;
+    background-color: #fff;
+    border-left: 3px solid #3498db;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #2c3e50;
+    white-space: pre-wrap;
+}
+
+.meal-header > div:last-child {
     display: flex;
     gap: 10px;
     align-items: center;