Unify content width for details view and editor.

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;

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

frontend/src/components/recipes/RecipeEditor.tsx

@@ -87,11 +87,12 @@ 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>
-
+                <div className="content-container">
                     {/* Title */}
                     <h2 className="section-heading">Titel</h2>
                     <input
@@ -155,5 +156,6 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
                     </div>
                 </div>
             </div>
+        </div>
     )
 }

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>