docs and background for details page

frontend/src/components/recipes/RecipeListPage.tsx

@@ -41,7 +41,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="bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8">
+      <div className="content-container">
         {/* Header - remains in position when scrolling */}
         <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
           <h1 className="content-title">Recipes</h1>