From 5a171f0f0f9425f4bf868acc1b37a268044049ad Mon Sep 17 00:00:00 2001
From: june <self@breadone.net>
Date: Thu, 14 Aug 2025 11:07:58 +1200
Subject: [PATCH] Fix styling for new ingredient table

---
 src/pages/recipe/new.astro | 48 ++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/pages/recipe/new.astro b/src/pages/recipe/new.astro
index 02cf587..0cf1319 100644
--- a/src/pages/recipe/new.astro
+++ b/src/pages/recipe/new.astro
@@ -11,49 +11,61 @@ const { recipeid } = Astro.params;
 ---
 
 <script>
-
+    let ingredients: {qty: string, unit: string, ing: string}[] = []
+    
+    function addIngredient(q: string, u: string, i: string) {
+        ingredients.push({qty: q, unit: u, ing: i})
+    }
 </script>
 
 <SiteLayout>
-    <div class="flex flex-col md:flex-row">
-        <div class="flex flex-1/3 flex-col mt-2 md:mt-4 sticky">
-            <div class="w-full bg-green-600 h-50">
+    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
+            <div class="w-full bg-white/20 rounded-lg h-50">
                 Image Upload
             </div>
             <!-- <ImageCarousel class="w-full" recipe={re} /> -->
-            <!-- <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p> -->
+            <textarea
+                id="rec-name"
+                name="Recipe Name"
+                rows="1"
+                placeholder="Recipe Name"
+                class="text-[28pt]  font-bold h-12 p-1 leading-none mt-2 bg-white/20 rounded-lg"
+                style="resize: none;"
+            />
 
             <!-- Details -->
             <!-- <InfoView re={re} /> -->
 
-            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <table class={`table-auto text-left bg-[#2a2b2c] md:w-80 px-4 rounded-lg w-full`}>
+            <div class="flex flex-row align-middle items-center">
+                <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
+            </div>
+            <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>
                     <tr>
-                        <th class="px-4 py-2">Quantity</th>
+                        <th class="px-4 py-2">Qty</th>
                         <th class="px-4 py-2">Unit</th>
                         <th class="px-4 py-2">Ingredient</th>
                     </tr>
                 </thead>
-                <tbody id="ingredient-table" class="border-t px-4 py-2 border-gray-600">
+                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-gray-600">
                     <tr id="ingredient-input" class="">
-                        <td class="px-4 py-1">˚
-                            <input class="w-3/4 bg-white/20 rounded-lg px-2" type="text">
+                        <td class="px-2 py-1">
+                            <input class="w-full h-10 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Amount">
                         </td>
-                        <td class="px-4 py-1">
-                            <input class="w-3/4 bg-white/20 rounded-lg px-2" type="text">
+                        <td class="px-2 py-1">
+                            <input class="w-full h-10 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Unit">
                         </td>
-                        <td class="px-4 py-1">
-                            <!-- <input class="w-3/4 text-wrap bg-white/20 rounded-lg px-2" type="text"> -->
-                             <textarea class="block  bg-white/20 rounded-lg px-2"></textarea>
+                        <td class="px-2 py-1">
+                            <textarea class="w-full h-10 bg-white/20 rounded-lg px-2 py-2 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/>
                         </td>
                     </tr>
                 </tbody>
             </table>
         </div>
         
-        <div class="flex w-full flex-col">
-            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p> -->
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
+            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
 
             <!-- Steps -->
             <!-- <StepView steps={steps} /> -->