From cc7cb9edc94d4a9a060fb87fe18430674282de82 Mon Sep 17 00:00:00 2001
From: fred <>
Date: Fri, 8 Aug 2025 11:55:59 -0700
Subject: [PATCH] mobile spacing

---
 frontend/src/pages/AddRecipe.tsx  |  8 +++++---
 frontend/src/pages/RecipePage.tsx | 19 +++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/AddRecipe.tsx b/frontend/src/pages/AddRecipe.tsx
index 54f61c4..8de8a83 100644
--- a/frontend/src/pages/AddRecipe.tsx
+++ b/frontend/src/pages/AddRecipe.tsx
@@ -64,21 +64,23 @@ function AddRecipe() {
       <form onSubmit={addRecipeForm} className="add-recipe-form">
         <input
           type="text"
-          placeholder="recipe name"
+          placeholder="Title"
           className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
           value={recipeName}
+          maxLength={35}
           onChange={(e) => setRecipeName(e.target.value)}
         />
         <input
           type="text"
-          placeholder="cuisine"
+          placeholder="Cuisine"
           className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
           value={recipeCuisine}
+          maxLength={15}
           onChange={(e) => setRecipeCuisine(e.target.value)}
         />
         <input
           type="text"
-          placeholder="author or source"
+          placeholder="Author"
           className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
           value={author}
           onChange={(e) => setAuthor(e.target.value)}
diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx
index f5c1aea..97ee6c4 100644
--- a/frontend/src/pages/RecipePage.tsx
+++ b/frontend/src/pages/RecipePage.tsx
@@ -99,14 +99,17 @@ function RecipePage() {
         </div>
       ) : (
 
-        <div className="recipe-card relative">
-          <button onClick={openModal} className="ar-button bg-amber-500 text-white py-1 px-2 rounded hover:bg-amber-600 m-2 absolute top-0 right-0">
-            🗑️
-          </button>
-          <div className="border-b-2 border-amber-300 pb-4 mb-6">
-            <h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
-            <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
-            <p>prep: <TimeDisplay minutes={recipe.details.prep_minutes ?? 0} /> | cook: <TimeDisplay minutes={recipe.details.cook_minutes ?? 0} /></p>
+        <div className="border-b-2 border-amber-300 pb-4">
+          <div className="recipe-card">
+            <div className="flex relative justify-between">
+              <button onClick={() => { }} className="invisible ar-button py-1 px-1 rounded self-start">🗑️</button>
+              <h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-amber-900">{recipe.details.name}</h3>
+              <button onClick={openModal} className="ar-button bg-amber-500 text-white py-1 px-1 rounded hover:bg-amber-600 self-start">🗑️</button>
+            </div>
+            <div className="mt-1">
+              <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
+              <p>prep: <TimeDisplay minutes={recipe.details.prep_minutes ?? 0} /> | cook: <TimeDisplay minutes={recipe.details.cook_minutes ?? 0} /></p>
+            </div>
           </div>
 
           <div className="grid lg:grid-cols-2 gap-6 mb-6">