From fdb1b3625f4da45481464605d304f5fecdca20ea Mon Sep 17 00:00:00 2001
From: araemer <anika@raemer.net>
Date: Sun, 7 Dec 2025 08:26:05 +0100
Subject: [PATCH] Use PageContentLayout.tsx everywhere

---
 frontend/src/components/basics/PageContentLayout.tsx | 8 +++++---
 frontend/src/components/recipes/RecipeEditor.tsx     | 6 +++---
 frontend/src/components/recipes/RecipeListPage.tsx   | 6 +++---
 frontend/src/components/users/UserManagementPage.tsx | 6 +++---
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/basics/PageContentLayout.tsx b/frontend/src/components/basics/PageContentLayout.tsx
index 1ed1594..861a5ac 100644
--- a/frontend/src/components/basics/PageContentLayout.tsx
+++ b/frontend/src/components/basics/PageContentLayout.tsx
@@ -34,12 +34,14 @@ export default function PageContentLayout({
             <CircularIconButton
                 onClick={() => setIsMenuOpen(true)}
                 buttonType={ButtonType.LightButton}
-                className="sticky top-4 float-right w-10 h-10 z-20 mb-[-40px]"
+                className="absolute top-4 right-4 w-10 h-10 z-20"
                 icon={Settings}
             />
 
-            {/* Page content */}
-            {children}
+            {/* Page content with top padding to accommodate settings button */}
+            <div className="pt-8">
+                {children}
+            </div>
 
             {/* Overlay Settings Menu */}
             {isMenuOpen && <SettingsMenu onClose={() => setIsMenuOpen(false)}/>}
diff --git a/frontend/src/components/recipes/RecipeEditor.tsx b/frontend/src/components/recipes/RecipeEditor.tsx
index 08f9118..154bf6c 100644
--- a/frontend/src/components/recipes/RecipeEditor.tsx
+++ b/frontend/src/components/recipes/RecipeEditor.tsx
@@ -7,9 +7,9 @@ import {InstructionStepListEditor} from "./InstructionStepListEditor"
 import type {InstructionStepModel} from "../../models/InstructionStepModel"
 import {ButtonType} from "../basics/BasicButtonDefinitions"
 import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
-import ContentBackground from "../basics/ContentBackground.tsx";
 import ContentBody from "../basics/ContentBody.tsx";
 import PageContainer from "../basics/PageContainer.tsx";
+import PageContentLayout from "../basics/PageContentLayout.tsx";
 
 type RecipeEditorProps = {
     recipe: RecipeModel
@@ -86,7 +86,7 @@ export function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorProps) {
         /*Container spanning entire screen used to center content horizontally */
         <PageContainer>
             {/* Container defining the maximum width of the content */}
-            <ContentBackground>
+            <PageContentLayout>
                 <h1 className="border-b-2 border-gray-300 pb-4">
                     {recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
                 </h1>
@@ -152,7 +152,7 @@ export function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorProps) {
                         />
                     </ButtonGroupLayout>
                 </ContentBody>
-            </ContentBackground>
+            </PageContentLayout>
         </PageContainer>
     )
 }
diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx
index 765d7d5..2dab8dd 100644
--- a/frontend/src/components/recipes/RecipeListPage.tsx
+++ b/frontend/src/components/recipes/RecipeListPage.tsx
@@ -6,8 +6,8 @@ import {useNavigate} from "react-router-dom"
 import {getRecipeAddUrl, getRecipeDetailUrl, getRecipeListUrl} from "../../routes"
 import RecipeListToolbar from "./RecipeListToolbar"
 import StickyHeader from "../basics/StickyHeader.tsx";
-import ContentBackground from "../basics/ContentBackground.tsx";
 import PageContainer from "../basics/PageContainer.tsx";
+import PageContentLayout from "../basics/PageContentLayout.tsx";
 
 /**
  * Displays a list of recipes in a sidebar layout.
@@ -46,7 +46,7 @@ export default function RecipeListPage() {
         /*Container spanning entire screen used to center content horizontally */
         <PageContainer>
             {/* Container defining the maximum width of the content */}
-            <ContentBackground>
+            <PageContentLayout>
                 {/* Header - remains in position when scrolling */}
                 <StickyHeader>
                     <h1>Recipes</h1>
@@ -69,7 +69,7 @@ export default function RecipeListPage() {
                         ))}
                     </div>
                 </div>
-            </ContentBackground>
+            </PageContentLayout>
         </PageContainer>
     )
 }  
diff --git a/frontend/src/components/users/UserManagementPage.tsx b/frontend/src/components/users/UserManagementPage.tsx
index ac674ea..7cc4f70 100644
--- a/frontend/src/components/users/UserManagementPage.tsx
+++ b/frontend/src/components/users/UserManagementPage.tsx
@@ -1,7 +1,6 @@
 import {useEffect, useState} from "react";
 import {createUser, fetchAllUsers, fetchCurrentUser, updateUser,} from "../../api/points/UserPoint";
 import type {UserDto} from "../../api/dtos/UserDto";
-import ContentBackground from "../basics/ContentBackground";
 import ContentBody from "../basics/ContentBody";
 import StickyHeader from "../basics/StickyHeader";
 import Button from "../basics/Button";
@@ -18,6 +17,7 @@ import UserList from "./UserList";
 import UserEditForm from "./UserEditForm";
 import ErrorPopup from "../basics/ErrorPopup";
 import {UserRole} from "../../api/enums/UserRole.ts";
+import PageContentLayout from "../basics/PageContentLayout.tsx";
 
 /**
  * UserManagementPage
@@ -151,7 +151,7 @@ export default function UserManagementPage() {
 
     return (
         <PageContainer>
-            <ContentBackground>
+            <PageContentLayout>
                 <StickyHeader className="flex justify-between items-center">
                     <h1>Benutzerverwaltung</h1>
                     <ButtonGroupLayout>
@@ -211,7 +211,7 @@ export default function UserManagementPage() {
                 {error && (
                     <ErrorPopup message={error} onClose={() => setError(null)}/>
                 )}
-            </ContentBackground>
+            </PageContentLayout>
         </PageContainer>
     );
 }
\ No newline at end of file