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,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>
-
+                <div className="content-container">
-                {/* Title */}
+                    {/* Title */}
-                <h2 className="section-heading">Titel</h2>
+                    <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>
                     <input
-                        type="number"
+                        className={`input-field ${errors.title ? "error-text" : ""}`}
-                        className="input-field w-20"
+                        placeholder="Titel"
-                        placeholder="1"
+                        value={draft.title}
-                        value={draft.servings.amount}
+                        onChange={e => setDraft({...draft, title: e.target.value})}
-                        onChange={e => {
-                            const tempServings = draft.servings
-                            tempServings.amount = Number(e.target.value)
-                            setDraft({...draft, servings: tempServings})
-                        }}
                     />
-                    <input
+                    {/* Servings */}
-                        className="input-field"
+                    <h2 className="section-heading">Portionen</h2>
-                        placeholder="Personen"
+                    <div className="columns-3 gap-2 flex items-center">
-                        value={draft.servings.unit}
+                        <label>Für</label>
-                        onChange={e => {
+                        <input
-                            const tempServings = draft.servings
+                            type="number"
-                            tempServings.unit = e.target.value
+                            className="input-field w-20"
-                            setDraft({...draft, servings: tempServings})
+                            placeholder="1"
-                        }}
+                            value={draft.servings.amount}
-                    />
+                            onChange={e => {
-                </div>
+                                const tempServings = draft.servings
-                {/* Ingredient List - @todo better visualization of errors! */}
+                                tempServings.amount = Number(e.target.value)
-                <div className={errors.ingredients ? "border error-text rounded p-2" : ""}>
+                                setDraft({...draft, servings: tempServings})
-                    <IngredientGroupListEditor
+                            }}
-                        ingredientGroupList={draft.ingredientGroupList}
+                        />
-                        onChange={updateIngredientGroupList}
+                        <input
-                    />
+                            className="input-field"
-                </div>
+                            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*/}
+                    {/* Instruction List*/}
-                <InstructionStepListEditor
+                    <InstructionStepListEditor
-                    instructionStepList={draft.instructionStepList}
+                        instructionStepList={draft.instructionStepList}
-                    onChange={updateInstructionList}
+                        onChange={updateInstructionList}
-                />
+                    />
 
 
-                <div className="button-group">
+                    <div className="button-group">
-                    {/* Save Button */}
+                        {/* Save Button */}
-                    <Button
+                        <Button
-                        onClick={() => handleSave(draft)}
+                            onClick={() => handleSave(draft)}
-                        text={"Speichern"}
+                            text={"Speichern"}
-                        buttonType={ButtonType.PrimaryButton}
+                            buttonType={ButtonType.PrimaryButton}
-                    />
+                        />
-                    <Button
+                        <Button
-                        onClick={() => onCancel()}
+                            onClick={() => onCancel()}
-                        text={"Abbrechen"}
+                            text={"Abbrechen"}
-                    />
+                        />
+                    </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>