From ada4396405dd4a90c3cfb01ffcf2f2a983c987e2 Mon Sep 17 00:00:00 2001
From: araemer <anika@raemer.net>
Date: Wed, 22 Oct 2025 20:15:57 +0200
Subject: [PATCH] Unify content width for details view and editor.

---
 frontend/src/App.css                          |   6 +-
 .../components/recipes/RecipeDetailPage.tsx   |   6 +-
 .../src/components/recipes/RecipeEditor.tsx   | 116 +++++++++---------
 .../src/components/recipes/RecipeListPage.tsx |   4 +-
 4 files changed, 69 insertions(+), 63 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 7b2f261..cd2f91d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -11,10 +11,14 @@
         @apply flex items-center w-screen justify-center min-h-screen bg-gray-50;
     }
 
-    .content-container {
+    .content-bg {
         @apply bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8;
     }
 
+    .content-container {
+        @apply p-6 max-w-2xl mx-auto;
+    }
+
     /* headings */
     .sticky-header {
         @apply sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300;
diff --git a/frontend/src/components/recipes/RecipeDetailPage.tsx b/frontend/src/components/recipes/RecipeDetailPage.tsx
index fb67cff..a67d7dc 100644
--- a/frontend/src/components/recipes/RecipeDetailPage.tsx
+++ b/frontend/src/components/recipes/RecipeDetailPage.tsx
@@ -59,7 +59,7 @@ export default function RecipeDetailPage() {
             ingredientList: ingGrp.ingredientList.map((ing) => ({
                 ...ing,
                 // ensure only to recalculate the amount of ingredients that actually have an amout...
-                amount: (ing.amount && ing.amount !== undefined) ? ing.amount * factor : undefined,
+                amount: (ing.amount) ? ing.amount * factor : undefined,
             }))
         }))
 
@@ -78,14 +78,14 @@ export default function RecipeDetailPage() {
         /*Container spanning entire screen used to center content horizontally */
         <div className="app-bg">
             {/* Container defining the maximum width of the content */}
-            <div className="content-container">
+            <div className="content-bg">
                 {/* Header - remains in position when scrolling */}
                 <div className="sticky-header">
                     <h1 className="content-title mb-0 pb-0">{recipeWorkingCopy.title}</h1>
                 </div>
 
                 {/* Content */}
-                <div className="p-6 max-w-2xl mx-auto">
+                <div className="content-container">
                     {/* Recipe image */}
                     {recipe.imageUrl && (
                         <img
diff --git a/frontend/src/components/recipes/RecipeEditor.tsx b/frontend/src/components/recipes/RecipeEditor.tsx
index c3d586b..327423e 100644
--- a/frontend/src/components/recipes/RecipeEditor.tsx
+++ b/frontend/src/components/recipes/RecipeEditor.tsx
@@ -87,71 +87,73 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
         /*Container spanning entire screen used to center content horizontally */
         <div className="app-bg">
             {/* Container defining the maximum width of the content */}
-            <div className="content-container">
+            <div className="content-bg">
+
                 <h1 className="content-title border-b-2 border-gray-300">
                     {recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
                 </h1>
-
-                {/* Title */}
-                <h2 className="section-heading">Titel</h2>
-                <input
-                    className={`input-field ${errors.title ? "error-text" : ""}`}
-                    placeholder="Titel"
-                    value={draft.title}
-                    onChange={e => setDraft({...draft, title: e.target.value})}
-                />
-                {/* Servings */}
-                <h2 className="section-heading">Portionen</h2>
-                <div className="columns-3 gap-2 flex items-center">
-                    <label>Für</label>
+                <div className="content-container">
+                    {/* Title */}
+                    <h2 className="section-heading">Titel</h2>
                     <input
-                        type="number"
-                        className="input-field w-20"
-                        placeholder="1"
-                        value={draft.servings.amount}
-                        onChange={e => {
-                            const tempServings = draft.servings
-                            tempServings.amount = Number(e.target.value)
-                            setDraft({...draft, servings: tempServings})
-                        }}
+                        className={`input-field ${errors.title ? "error-text" : ""}`}
+                        placeholder="Titel"
+                        value={draft.title}
+                        onChange={e => setDraft({...draft, title: e.target.value})}
                     />
-                    <input
-                        className="input-field"
-                        placeholder="Personen"
-                        value={draft.servings.unit}
-                        onChange={e => {
-                            const tempServings = draft.servings
-                            tempServings.unit = e.target.value
-                            setDraft({...draft, servings: tempServings})
-                        }}
-                    />
-                </div>
-                {/* Ingredient List - @todo better visualization of errors! */}
-                <div className={errors.ingredients ? "border error-text rounded p-2" : ""}>
-                    <IngredientGroupListEditor
-                        ingredientGroupList={draft.ingredientGroupList}
-                        onChange={updateIngredientGroupList}
-                    />
-                </div>
+                    {/* Servings */}
+                    <h2 className="section-heading">Portionen</h2>
+                    <div className="columns-3 gap-2 flex items-center">
+                        <label>Für</label>
+                        <input
+                            type="number"
+                            className="input-field w-20"
+                            placeholder="1"
+                            value={draft.servings.amount}
+                            onChange={e => {
+                                const tempServings = draft.servings
+                                tempServings.amount = Number(e.target.value)
+                                setDraft({...draft, servings: tempServings})
+                            }}
+                        />
+                        <input
+                            className="input-field"
+                            placeholder="Personen"
+                            value={draft.servings.unit}
+                            onChange={e => {
+                                const tempServings = draft.servings
+                                tempServings.unit = e.target.value
+                                setDraft({...draft, servings: tempServings})
+                            }}
+                        />
+                    </div>
+                    {/* Ingredient List - @todo better visualization of errors! */}
+                    <div className={errors.ingredients ? "border error-text rounded p-2" : ""}>
+                        <IngredientGroupListEditor
+                            ingredientGroupList={draft.ingredientGroupList}
+                            onChange={updateIngredientGroupList}
+                        />
+                    </div>
 
-                {/* Instruction List*/}
-                <InstructionStepListEditor
-                    instructionStepList={draft.instructionStepList}
-                    onChange={updateInstructionList}
-                />
+                    {/* Instruction List*/}
+                    <InstructionStepListEditor
+                        instructionStepList={draft.instructionStepList}
+                        onChange={updateInstructionList}
+                    />
 
 
-                <div className="button-group">
-                    {/* Save Button */}
-                    <Button
-                        onClick={() => handleSave(draft)}
-                        text={"Speichern"}
-                        buttonType={ButtonType.PrimaryButton}
-                    />
-                    <Button
-                        onClick={() => onCancel()}
-                        text={"Abbrechen"}
-                    />
+                    <div className="button-group">
+                        {/* Save Button */}
+                        <Button
+                            onClick={() => handleSave(draft)}
+                            text={"Speichern"}
+                            buttonType={ButtonType.PrimaryButton}
+                        />
+                        <Button
+                            onClick={() => onCancel()}
+                            text={"Abbrechen"}
+                        />
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx
index 090ee8a..f518bb4 100644
--- a/frontend/src/components/recipes/RecipeListPage.tsx
+++ b/frontend/src/components/recipes/RecipeListPage.tsx
@@ -30,7 +30,7 @@ export default function RecipeListPage() {
             }
         }
         loadRecipeList()
-    }, [, searchString])
+    }, [searchString])
 
     const handleAdd = () => {
         navigate(getRecipeAddUrl())
@@ -43,7 +43,7 @@ export default function RecipeListPage() {
         /*Container spanning entire screen used to center content horizontally */
         <div className="app-bg">
             {/* Container defining the maximum width of the content */}
-            <div className="content-container">
+            <div className="content-bg">
                 {/* Header - remains in position when scrolling */}
                 <div className="sticky-header">
                     <h1 className="content-title">Recipes</h1>