Use PageContentLayout.tsx everywhere

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)}/>}

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>
     )
 }

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>
     )
 }  

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>
     );
 }