127 create shared layout for all pages

frontend/src/App.tsx

@@ -3,13 +3,10 @@ import HomePage from "./pages/homePage/homePage";
 import CategoryPage from "./pages/categoryPage/categoryPage";
 import PcBuilderPage from "./pages/pcBuilderPage/pcBuilderPage";
 import CommunityPage from "./pages/communityPage/communityPage";
-import NavBar from "./components/pageSections/Header";
-import Footer from "./components/pageSections/Footer";
-import BackToTopButton from "./components/buttons/BackToTopButton";
+import Layout from "./components/Layout";
 import LoginPage from "./pages/loginPage/loginPage";
 import AccountPage from "./pages/accountPage/accountPage";
 import { Routes, Route, useLocation, useParams } from "react-router";
-import Notification from "./components/Notification";
 import { useSelector } from "react-redux";
 import type { RootState } from "./state/store";
 
@@ -28,29 +25,21 @@ function App() {
     (state: RootState) => state.auth.user?.uid ?? "guest",
   );
   return (
-    <div className="flex min-h-screen flex-col">
-      <header className="sticky top-0 z-50 bg-background">
-        <NavBar />
-      </header>
-      <main className="flex-1">
-        <Routes key={accountKey}>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/explore" element={<CategoryPage />} />
-          <Route
-            path="/explore/category/:category"
-            element={<CategoryRoute />}
-          />
-          <Route path="/builder" element={<BuilderRoute />} />
-          <Route path="/community" element={<CommunityPage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/account" element={<AccountPage />} />
-          <Route path="*" element={<p>404 - Page not found</p>} />
-        </Routes>
-      </main>
-      <Footer />
-      <BackToTopButton />
-      <Notification />
-    </div>
+    <Layout>
+      <Routes key={accountKey}>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/explore" element={<CategoryPage />} />
+        <Route path="/explore/category/:category" element={<CategoryRoute />} />
+        <Route path="/builder" element={<BuilderRoute />} />
+        <Route path="/community" element={<CommunityPage />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/account" element={<AccountPage />} />
+        <Route
+          path="*"
+          element={<p className="w-full">404 - Page not found</p>}
+        />
+      </Routes>
+    </Layout>
   );
 }
 export default App;

frontend/src/components/AllPartsPreview.tsx

@@ -178,13 +178,14 @@ function PartsResults({
   }, [featured, handleLoadMore, loading, error, pageInfo?.hasNextPage]);
 
   return (
-    <section className="flex w-full min-w-0 max-w-7xl flex-col text-white p-2 md:p-0">
+    <section className="flex flex-col gap-4 w-full min-w-0 max-w-[100rem]  text-white p-2 md:p-0">
+
       {viewenabled && (
         <ViewSelector viewType={viewType} onViewChange={setViewType} />
       )}
 
       {!featured && (
-        <p className={`mb-3 ${loading || error ? "invisible" : ""}`}>
+        <p className={` ${loading || error ? "invisible" : ""} `}>
           Showing {visibleParts.length} of {totalCount} components
         </p>
       )}

frontend/src/components/CategorySelection.tsx

@@ -32,7 +32,7 @@ export default function CategorySelection({
   showViewAll = true,
 }: CategorySelectionProps) {
   return (
-    <section className="mx-auto w-[90%] max-w-lg text-white lg:mx-0 lg:w-full lg:max-w-none">
+    <section className="mx-auto w-full max-w-lg text-white lg:mx-0 lg:w-full lg:max-w-none">
       <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
         <div className="w-full text-center lg:w-auto lg:text-left">
           <h2 className="text-2xl lg:text-xl lg:font-bold">

frontend/src/components/FilterComponent.tsx

@@ -48,7 +48,7 @@ export default function FilterComponent({
   return (
     <section
       aria-label="Search and filter components"
-      className={`w-[90%] max-w-6xl text-white flex justify-center ${isDesktopSize ? "border border-gray-600 rounded-2xl bg-surface-dark p-2" : ""} items-center h-fit gap-2`}
+      className={`w-full max-w-[100rem] text-white flex justify-center ${isDesktopSize ? "border border-gray-600 rounded-2xl bg-surface-dark p-2" : ""} items-center h-fit gap-2`}
     >
       <SearchComponent value={search} onChange={setSearch} variant="light" />
       {isDesktopSize ? (

frontend/src/components/Layout.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import NavBar from "./pageSections/Header";
+import Footer from "./pageSections/Footer";
+import BackToTopButton from "./buttons/BackToTopButton";
+import Notification from "./Notification";
+
+const contentWidth = "mx-auto w-full max-w-[100rem] px-4 sm:px-6";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-dvh flex-col">
+      <header className="sticky top-0 z-50 bg-surface shadow-2xl">
+        <div className={contentWidth}>
+          <NavBar />
+        </div>
+      </header>
+      <main className={`${contentWidth} min-w-0 flex-1 py-6`}>{children}</main>
+      <footer className="bg-surface text-white">
+        <div className={contentWidth}>
+          <Footer />
+        </div>
+      </footer>
+      <BackToTopButton />
+      <Notification />
+    </div>
+  );
+}

frontend/src/components/pageSections/Footer.tsx

@@ -1,16 +1,14 @@
 export default function Footer() {
   return (
-    <footer className="bg-surface text-white">
-      <div className="mx-auto flex w-[92%] max-w-7xl flex-col gap-4 py-6 text-sm sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <p className="font-bold">Full Circuit</p>
-          <p className="mt-1 text-secondary">
-            Explore PC components and plan your build.
-          </p>
-        </div>
-
-        <p className="text-secondary">© 2026 Team 15, IT2810</p>
+    <div className="flex w-full flex-col gap-4 py-6 text-sm sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <p className="font-bold">Full Circuit</p>
+        <p className="mt-1 text-secondary">
+          Explore PC components and plan your build.
+        </p>
       </div>
-    </footer>
+
+      <p className="text-secondary">© 2026 Team 15, IT2810</p>
+    </div>
   );
 }

frontend/src/components/pageSections/Header.tsx

@@ -32,7 +32,7 @@ export default function NavBar() {
   return (
     <nav
       aria-label="Main navigation"
-      className="relative flex items-stretch gap-4 lg:gap-8 bg-surface px-4 h-17 whitespace-nowrap text-sm shadow-2xl"
+      className="relative flex w-full items-stretch gap-4 lg:gap-8 h-17 whitespace-nowrap text-sm"
     >
       <Link
         to="/"

frontend/src/pages/accountPage/accountPage.tsx

@@ -18,15 +18,15 @@ export default function AccountPage() {
 
   if (loading) {
     return (
-      <p role="status" className="p-6">
+      <p role="status" className="w-full">
         Loading account...
       </p>
     );
   }
 
   if (!user) {
     return (
-      <section className="mx-auto max-w-md px-5 py-16 text-center text-white">
+      <section className="w-full text-center text-white">
         <UserRound
           aria-hidden="true"
           className="mx-auto mb-4 h-10 w-10 text-accent"
@@ -109,7 +109,7 @@ function AccountContent() {
   }
 
   return (
-    <section className="mx-auto w-full max-w-7xl px-4 py-8 text-white sm:px-6">
+    <section className="w-full text-white">
       <header className="flex flex-wrap items-center justify-between gap-5 rounded-xl bg-surface p-6">
         <div className="flex items-center gap-4">
           <div className="rounded-full bg-background p-3 text-accent">

frontend/src/pages/categoryPage/categoryPage.tsx

@@ -19,8 +19,16 @@ export default function CategoryPage({ category }: CategoryPageProps) {
   );
 
   return (
-    <div className="mx-auto flex min-h-screen w-[92%] max-w-7xl flex-col items-center gap-6 py-6">
-      <CategorySelection showViewAll={false} />
+    <div className="flex w-full flex-col items-center gap-6">
+
+       <CategorySelection showViewAll={false} />
+      <FilterComponent
+        defaultCategory={initialCategory?.value}
+        filtOptions={filtOptions}
+        setFiltOptions={setFiltOptions}
+        search={search}
+        setSearch={setSearch}
+      />
 
       <h1 className="text-2xl">
         {invalidCategory
@@ -29,13 +37,6 @@ export default function CategoryPage({ category }: CategoryPageProps) {
             ? `Showing results for "${search}"`
             : (selectedCategory?.label ?? "All components")}
       </h1>
-      <FilterComponent
-        defaultCategory={initialCategory?.value}
-        filtOptions={filtOptions}
-        setFiltOptions={setFiltOptions}
-        search={search}
-        setSearch={setSearch}
-      />
 
       {!invalidCategory && <AllPartsPreview {...filtOptions} search={search} />}
     </div>

frontend/src/pages/communityPage/communityPage.tsx

@@ -32,7 +32,7 @@ export default function CommunityPage() {
   }
 
   return (
-    <section className="mx-auto min-h-screen max-w-7xl px-3 py-5 text-white sm:px-5">
+    <section className="w-full text-white">
       <h1 className="mb-8 text-2xl">Community builds</h1>
       {loading && <p role="status">Loading builds...</p>}
       {error && <p role="alert">{error}</p>}

frontend/src/pages/homePage/homePage.tsx

@@ -9,67 +9,65 @@ export default function HomePage() {
   const { search, setSearch, filtOptions, setFiltOptions } = useCatalogParams();
 
   return (
-    <div className="min-h-screen">
-      <div className="mx-auto flex w-[92%] max-w-7xl flex-col gap-6 py-6">
-        <BuildPCGraphic />
-        <CategorySelection />
+    <div className="flex w-full flex-col gap-6">
+      <BuildPCGraphic />
+      <CategorySelection />
 
-        <section id="components" className="w-full">
-          <header className="mb-4 flex items-end justify-between gap-3">
-            <div className="hidden lg:block">
-              <h2 className="text-xl font-bold">Explore processors</h2>
-              <p className="mt-1 text-sm text-secondary">
-                Take a closer look at the components in our catalog.
-              </p>
-            </div>
-
-            <Link
-              to="/explore/category/CPU"
-              className="hidden shrink-0 text-sm text-accent hover:underline lg:block"
-            >
-              Browse processors →
-            </Link>
-          </header>
-
-          <section className="hidden lg:block">
-            <AllPartsPreview
-              key="featured-processors"
-              category="CPU"
-              first={2}
-              defaultview="2-grid-view"
-              viewenabled={false}
-              featured
-            />
-          </section>
-        </section>
-
-        <section className="mx-auto w-full max-w-3xl lg:hidden">
-          <div className="mb-4 text-center">
-            <h2 className="text-xl font-bold">Browse components</h2>
+      <section id="components" className="w-full">
+        <header className="mb-4 flex items-end justify-between gap-3">
+          <div className="hidden lg:block">
+            <h2 className="text-xl font-bold">Explore processors</h2>
             <p className="mt-1 text-sm text-secondary">
-              Search the catalog or filter by category.
+              Take a closer look at the components in our catalog.
             </p>
           </div>
 
-          <div className="flex justify-center w-full">
-            <FilterComponent
-              filtOptions={filtOptions}
-              setFiltOptions={setFiltOptions}
-              search={search}
-              setSearch={setSearch}
-            />
-          </div>
+          <Link
+            to="/explore/category/CPU"
+            className="hidden shrink-0 text-sm text-accent hover:underline lg:block"
+          >
+            Browse processors →
+          </Link>
+        </header>
 
-          <div className="mt-5">
-            <AllPartsPreview
-              {...filtOptions}
-              search={search}
-              defaultview="2-grid-view"
-              viewenabled={false}
-            />
-          </div>
+        <section className="hidden lg:block">
+          <AllPartsPreview
+            key="featured-processors"
+            category="CPU"
+            first={2}
+            defaultview="2-grid-view"
+            viewenabled={false}
+            featured
+          />
         </section>
-      </div>
+      </section>
+
+      <section className="w-full lg:hidden">
+        <div className="mb-4 text-center">
+          <h2 className="text-xl font-bold">Browse components</h2>
+          <p className="mt-1 text-sm text-secondary">
+            Search the catalog or filter by category.
+          </p>
+        </div>
+
+        <div className="flex justify-center w-full">
+          <FilterComponent
+            filtOptions={filtOptions}
+            setFiltOptions={setFiltOptions}
+            search={search}
+            setSearch={setSearch}
+          />
+        </div>
+
+        <div className="mt-5">
+          <AllPartsPreview
+            {...filtOptions}
+            search={search}
+            defaultview="2-grid-view"
+            viewenabled={false}
+          />
+        </div>
+      </section>
     </div>
   );
 }

frontend/src/pages/loginPage/loginPage.tsx

@@ -68,12 +68,16 @@ export default function LoginPage() {
   }
 
   if (loading) {
-    return <p role="status">Loading...</p>;
+    return (
+      <p role="status" className="w-full">
+        Loading...
+      </p>
+    );
   }
 
   if (user) {
     return (
-      <section className="mx-auto max-w-md px-4 py-10 text-white">
+      <section className="w-full text-white">
         <p role="status">You’re signed in.</p>
         <Link to="/builder" className="text-accent underline">
           Go to PC builder
@@ -83,7 +87,7 @@ export default function LoginPage() {
   }
 
   return (
-    <section className="mx-auto w-full max-w-md px-5 py-12 text-white">
+    <section className="w-full text-white">
       <div key={registering ? "register" : "login"} className="auth-form-enter">
         <h1 className="text-center text-2xl font-semibold">
           {registering ? "Create account" : "Welcome back"}

frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx

@@ -46,7 +46,7 @@ export default function OpenSavedBuild({ children }: { children: ReactNode }) {
 
   if (error) {
     return (
-      <section className="mx-auto max-w-7xl px-5 py-8 text-white">
+      <section className="w-full text-white">
         <p role="alert">{error}</p>
         <Link to="/account" className="mt-4 inline-block text-accent underline">
           Back to My builds
@@ -56,7 +56,7 @@ export default function OpenSavedBuild({ children }: { children: ReactNode }) {
   }
   if (!ready)
     return (
-      <p role="status" className="p-6">
+      <p role="status" className="w-full">
         Opening saved build...
       </p>
     );