Add StickyHeader Component and introduce clsx for merging tailwind classNames

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -8,6 +8,7 @@ import {mapRecipeDtoToModel} from "../../mappers/RecipeMapper"
 import {NumberStepControl} from "../basics/NumberStepControl.tsx";
 import {NumberedListItem} from "../basics/NumberedListItem.tsx";
 import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
+import StickyHeader from "../basics/StickyHeader.tsx";
 
 
 /**
@@ -81,9 +82,9 @@ export default function RecipeDetailPage() {
             {/* Container defining the maximum width of the content */}
             <div className="content-bg">
                 {/* Header - remains in position when scrolling */}
-                <div className="sticky-header">
+                <StickyHeader>
                     <h1>{recipeWorkingCopy.title}</h1>
-                </div>
+                </StickyHeader>
 
                 {/* Content */}
                 <div className="content-container">