From 08eebfa7ac6d0d038fcfbdef867b666c6b6ce819 Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Sat, 14 Nov 2026 10:46:26 +0100
Subject: [PATCH 1/4] feat: added a shared layout for all pages to have shared
 width and padding

---
 frontend/src/App.tsx                          |  43 +++----
 frontend/src/components/Layout.tsx            |  27 +++++
 .../src/components/pageSections/Footer.tsx    |  20 ++--
 .../src/components/pageSections/Header.tsx    |   2 +-
 .../src/pages/accountPage/accountPage.tsx     |   6 +-
 .../src/pages/categoryPage/categoryPage.tsx   |   2 +-
 .../src/pages/communityPage/communityPage.tsx |   2 +-
 frontend/src/pages/homePage/homePage.tsx      | 106 +++++++++---------
 frontend/src/pages/loginPage/loginPage.tsx    |  10 +-
 .../components/OpenSavedBuild.tsx             |   4 +-
 .../src/pages/pcBuilderPage/pcBuilderPage.tsx |  94 ++++++++--------
 11 files changed, 165 insertions(+), 151 deletions(-)
 create mode 100644 frontend/src/components/Layout.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4b8c57a..016b702 100644
--- a/frontend/src/App.tsx
+++ b/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;
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
new file mode 100644
index 0000000..f8d5c4b
--- /dev/null
+++ b/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-7xl 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>
+  );
+}
diff --git a/frontend/src/components/pageSections/Footer.tsx b/frontend/src/components/pageSections/Footer.tsx
index acc6f9c..408c7c1 100644
--- a/frontend/src/components/pageSections/Footer.tsx
+++ b/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>
   );
 }
diff --git a/frontend/src/components/pageSections/Header.tsx b/frontend/src/components/pageSections/Header.tsx
index 02f633e..22aa0cb 100644
--- a/frontend/src/components/pageSections/Header.tsx
+++ b/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="/"
diff --git a/frontend/src/pages/accountPage/accountPage.tsx b/frontend/src/pages/accountPage/accountPage.tsx
index 247bd54..4b4a5ae 100644
--- a/frontend/src/pages/accountPage/accountPage.tsx
+++ b/frontend/src/pages/accountPage/accountPage.tsx
@@ -18,7 +18,7 @@ export default function AccountPage() {
 
   if (loading) {
     return (
-      <p role="status" className="p-6">
+      <p role="status" className="w-full">
         Loading account...
       </p>
     );
@@ -26,7 +26,7 @@ export default function AccountPage() {
 
   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">
diff --git a/frontend/src/pages/categoryPage/categoryPage.tsx b/frontend/src/pages/categoryPage/categoryPage.tsx
index cbb2c1b..213b19f 100644
--- a/frontend/src/pages/categoryPage/categoryPage.tsx
+++ b/frontend/src/pages/categoryPage/categoryPage.tsx
@@ -19,7 +19,7 @@ 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">
+    <div className="flex w-full flex-col items-center gap-6">
       <CategorySelection showViewAll={false} />
 
       <h1 className="text-2xl">
diff --git a/frontend/src/pages/communityPage/communityPage.tsx b/frontend/src/pages/communityPage/communityPage.tsx
index 60b2ef8..c35eaca 100644
--- a/frontend/src/pages/communityPage/communityPage.tsx
+++ b/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>}
diff --git a/frontend/src/pages/homePage/homePage.tsx b/frontend/src/pages/homePage/homePage.tsx
index 5d9b6f8..08e6515 100644
--- a/frontend/src/pages/homePage/homePage.tsx
+++ b/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>
   );
 }
diff --git a/frontend/src/pages/loginPage/loginPage.tsx b/frontend/src/pages/loginPage/loginPage.tsx
index f00a5b5..c2aaccc 100644
--- a/frontend/src/pages/loginPage/loginPage.tsx
+++ b/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"}
diff --git a/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx b/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx
index 22e2272..5291acd 100644
--- a/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx
+++ b/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>
     );
diff --git a/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx b/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
index 3aa8308..4ba8284 100644
--- a/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
+++ b/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
@@ -28,60 +28,58 @@ function BuilderContent() {
   ).length;
 
   return (
-    <>
-      <section className="flex flex-col items-center px-3 sm:px-5">
-        <div className="w-full max-w-7xl py-5">
-          <h1 className="text-2xl">PC BUILDER</h1>
-          {savedBuild && (
-            <p className="mt-2 text-sm text-gray-300">
-              Editing: <span className="text-accent">{savedBuild.title}</span>
-              {isDirty ? " · Unsaved changes" : " · Saved"}
-              {savedBuild.isPublished ? " · Published" : " · Private"}
-            </p>
-          )}
-        </div>
+    <section className="flex w-full flex-col">
+      <div className="mb-5 w-full">
+        <h1 className="text-2xl">PC BUILDER</h1>
+        {savedBuild && (
+          <p className="mt-2 text-sm text-gray-300">
+            Editing: <span className="text-accent">{savedBuild.title}</span>
+            {isDirty ? " · Unsaved changes" : " · Saved"}
+            {savedBuild.isPublished ? " · Published" : " · Private"}
+          </p>
+        )}
+      </div>
 
-        <section className="min-h-screen flex flex-col lg:flex-row w-full gap-3 max-w-7xl">
-          <section className="flex min-w-0 flex-1 flex-col rounded-lg py-2 bg-surface border border-surface">
-            <div className="flex flex-wrap items-center gap-x-3 px-3">
-              <h2 className=" py-5 text-xl"> My Build</h2>
-              <p role="status" className="text-xs text-gray-300 ml-auto">
-                {selectedCount} out of 8 components selected
-              </p>
-            </div>
+      <section className="flex w-full flex-col gap-3 lg:flex-row">
+        <section className="flex min-w-0 flex-1 flex-col rounded-lg py-2 bg-surface border border-surface">
+          <div className="flex flex-wrap items-center gap-x-3 px-3">
+            <h2 className=" py-5 text-xl"> My Build</h2>
+            <p role="status" className="text-xs text-gray-300 ml-auto">
+              {selectedCount} out of 8 components selected
+            </p>
+          </div>
 
-            <section className="grid auto-rows-fr">
-              {categories.map((category) => (
-                <SelectionComponent
-                  key={category.value}
-                  category={category.label}
-                  categoryValue={category.value}
-                  part={parts[category.value]}
-                />
-              ))}
-            </section>
-            <ClearBuild />
+          <section className="grid auto-rows-fr">
+            {categories.map((category) => (
+              <SelectionComponent
+                key={category.value}
+                category={category.label}
+                categoryValue={category.value}
+                part={parts[category.value]}
+              />
+            ))}
           </section>
+          <ClearBuild />
+        </section>
 
-          <section className="relative w-full shrink-0 lg:w-100">
-            {/* On desktop, the component list determines the column height. */}
-            <div className="flex min-h-0 flex-col gap-4 lg:absolute lg:inset-0">
-              <div className="shrink-0">
-                <BuildSummaryComponent
-                  selectedCount={selectedCount}
-                  totalSum={totalSum}
-                  missingPriceCount={missingPriceCount}
-                  categories={categories}
-                />
-              </div>
-
-              <PublishBuild privately />
-              <PublishBuild />
-              <CompatabilityComponent parts={Object.values(parts)} />
+        <section className="relative w-full shrink-0 lg:w-100">
+          {/* On desktop, the component list determines the column height. */}
+          <div className="flex min-h-0 flex-col gap-4 lg:absolute lg:inset-0">
+            <div className="shrink-0">
+              <BuildSummaryComponent
+                selectedCount={selectedCount}
+                totalSum={totalSum}
+                missingPriceCount={missingPriceCount}
+                categories={categories}
+              />
             </div>
-          </section>
+
+            <PublishBuild privately />
+            <PublishBuild />
+            <CompatabilityComponent parts={Object.values(parts)} />
+          </div>
         </section>
       </section>
-    </>
+    </section>
   );
 }

From 5b031709ee94994b84b4c7da3acf9f91b7f2a5ce Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Sat, 14 Nov 2026 10:57:50 +0100
Subject: [PATCH 2/4] increased width to use a larger part of the screen, also
 increased width in catalogue and filter component

---
 frontend/src/components/AllPartsPreview.tsx     |  5 +++--
 frontend/src/components/FilterComponent.tsx     |  2 +-
 frontend/src/components/Layout.tsx              |  2 +-
 .../src/pages/categoryPage/categoryPage.tsx     | 17 +++++++++--------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/AllPartsPreview.tsx b/frontend/src/components/AllPartsPreview.tsx
index 21b531d..8679e4d 100644
--- a/frontend/src/components/AllPartsPreview.tsx
+++ b/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>
       )}
diff --git a/frontend/src/components/FilterComponent.tsx b/frontend/src/components/FilterComponent.tsx
index 8efd99a..6f6ac83 100644
--- a/frontend/src/components/FilterComponent.tsx
+++ b/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 ? (
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index f8d5c4b..8613810 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -4,7 +4,7 @@ import Footer from "./pageSections/Footer";
 import BackToTopButton from "./buttons/BackToTopButton";
 import Notification from "./Notification";
 
-const contentWidth = "mx-auto w-full max-w-7xl px-4 sm:px-6";
+const contentWidth = "mx-auto w-full max-w-[100rem] px-4 sm:px-6";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
diff --git a/frontend/src/pages/categoryPage/categoryPage.tsx b/frontend/src/pages/categoryPage/categoryPage.tsx
index 213b19f..a71c3ad 100644
--- a/frontend/src/pages/categoryPage/categoryPage.tsx
+++ b/frontend/src/pages/categoryPage/categoryPage.tsx
@@ -20,7 +20,15 @@ export default function CategoryPage({ category }: CategoryPageProps) {
 
   return (
     <div className="flex w-full flex-col items-center gap-6">
-      <CategorySelection showViewAll={false} />
+     
+       <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>

From 7e6ecdea390a7d23e2856ba20a16d32256e9e275 Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Sat, 14 Nov 2026 11:03:56 +0100
Subject: [PATCH 3/4] small ui change in width of component selection component

---
 frontend/src/components/CategorySelection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/CategorySelection.tsx b/frontend/src/components/CategorySelection.tsx
index 1df2333..b9f0c59 100644
--- a/frontend/src/components/CategorySelection.tsx
+++ b/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">

From a3806a7ae19df75e0992c4ce43d968be9483d936 Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Sat, 14 Nov 2026 12:54:14 +0100
Subject: [PATCH 4/4] feat: made pcPartCard layout repsonsive to its component
 size to fit the different catalogue views.

---
 frontend/src/assets/dualListIcon.tsx          | 28 +++++++++
 frontend/src/components/AllPartsPreview.tsx   | 18 +++---
 frontend/src/components/Notification.tsx      | 10 ++-
 frontend/src/components/PcPartCard.tsx        | 18 +-----
 frontend/src/components/PcPartCardLayout.tsx  | 62 +++++++++++++++----
 .../src/components/PcPartCardSkeleton.tsx     |  1 -
 frontend/src/components/ViewSelector.tsx      |  9 +--
 frontend/src/index.css                        | 11 ++++
 frontend/src/pages/loginPage/loginPage.tsx    |  2 +-
 frontend/src/test/PcPartCard.test.tsx         | 23 ++++---
 10 files changed, 127 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/assets/dualListIcon.tsx

diff --git a/frontend/src/assets/dualListIcon.tsx b/frontend/src/assets/dualListIcon.tsx
new file mode 100644
index 0000000..fc721b3
--- /dev/null
+++ b/frontend/src/assets/dualListIcon.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+
+export function DualListIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      {/* Left column */}
+      <path d="M2 5H10" />
+      <path d="M2 12H10" />
+      <path d="M2 19H10" />
+
+      {/* Right column */}
+      <path d="M14 5H22" />
+      <path d="M14 12H22" />
+      <path d="M14 19H22" />
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/AllPartsPreview.tsx b/frontend/src/components/AllPartsPreview.tsx
index 8679e4d..c87bac5 100644
--- a/frontend/src/components/AllPartsPreview.tsx
+++ b/frontend/src/components/AllPartsPreview.tsx
@@ -180,15 +180,17 @@ function PartsResults({
   return (
     <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} />
-      )}
+      <div className="flex items-center justify-between">
+        {!featured && (
+          <p className={` ${loading || error ? "invisible" : ""} `}>
+            Showing {visibleParts.length} of {totalCount} components
+          </p>
+        )}
 
-      {!featured && (
-        <p className={` ${loading || error ? "invisible" : ""} `}>
-          Showing {visibleParts.length} of {totalCount} components
-        </p>
-      )}
+         {viewenabled && (
+          <ViewSelector viewType={viewType} onViewChange={setViewType} />
+        )}
+      </div>
 
       <div
         aria-busy={loading}
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
index 4edc7b4..dde2e37 100644
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -66,10 +66,14 @@ export default function Notification() {
         return;
       }
 
+      const exitTransform = window.matchMedia("(min-width: 48rem)").matches
+        ? "translateX(calc(100% + 1rem))"
+        : "translateY(calc(-100% - 6rem))";
+
       exitAnimation = notification.animate(
         [
-          { transform: "translateX(0)", opacity: 1 },
-          { transform: "translateX(calc(100% + 1rem))", opacity: 0 },
+          { transform: "translate(0, 0)", opacity: 1 },
+          { transform: exitTransform, opacity: 0 },
         ],
         { duration: 250, easing: "ease-in", fill: "forwards" },
       );
@@ -120,7 +124,7 @@ export default function Notification() {
       }}
       aria-labelledby={titleId}
       aria-describedby={descriptionId}
-      className="fixed right-4 left-auto top-20 bottom-auto m-0 h-fit max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-sm overflow-y-auto rounded-2xl border border-surface bg-background p-0 text-white shadow-lg shadow-black/20 backdrop:bg-transparent motion-safe:animate-[feedback-slide-in_250ms_ease-out]"
+      className="fixed right-4 left-4 top-20 bottom-auto my-0 mx-auto md:left-auto md:mx-0 h-fit max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-sm overflow-y-auto rounded-2xl border border-surface bg-background p-0 text-white shadow-lg shadow-black/20 backdrop:bg-transparent motion-safe:animate-[notification-slide-down_250ms_ease-out] md:motion-safe:animate-[feedback-slide-in_250ms_ease-out]"
     >
       <button
         type="button"
diff --git a/frontend/src/components/PcPartCard.tsx b/frontend/src/components/PcPartCard.tsx
index 7432a86..c795996 100644
--- a/frontend/src/components/PcPartCard.tsx
+++ b/frontend/src/components/PcPartCard.tsx
@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from "react";
 import type { PcPart } from "@/types/types";
 import { getPartSpecifications } from "@/api/parts";
 import AddToBuildButton from "./buttons/AddToBuildButton";
-import Button from "@/components/buttons/Button";
 import PcPartCardLayout from "./PcPartCardLayout";
 
 export default function PcPartCard({
@@ -18,7 +17,6 @@ export default function PcPartCard({
   const [specifications, setSpecifications] = useState<
     PcPart["details"] | null
   >(null);
-  const [loadingDetails, setLoadingDetails] = useState(false);
   const [detailError, setDetailError] = useState("");
   const detailRequest = useRef<AbortController | null>(null);
   const imageUrl = part.image_url?.trim() ?? "";
@@ -43,7 +41,6 @@ export default function PcPartCard({
 
     const controller = new AbortController();
     detailRequest.current = controller;
-    setLoadingDetails(true);
     try {
       const details = await getPartSpecifications(part.id, controller.signal);
       if (controller.signal.aborted) return;
@@ -58,12 +55,12 @@ export default function PcPartCard({
     } finally {
       // Allow another click, including a retry if fetching failed.
       detailRequest.current = null;
-      if (!controller.signal.aborted) setLoadingDetails(false);
     }
   }
 
   return (
     <PcPartCardLayout
+      onShowDetails={handleShowDetails}
       image={
         imageUrl && imageUrl !== failedImage ? (
           <img
@@ -73,6 +70,7 @@ export default function PcPartCard({
             draggable={false}
             className="absolute inset-0 h-full w-full object-contain p-3"
             onError={() => setFailedImage(imageUrl)}
+            
           />
         ) : (
           <p className="text-xs text-gray-500">Image unavailable</p>
@@ -86,21 +84,11 @@ export default function PcPartCard({
           ? "Price unavailable"
           : `€ ${part.price_eur.toFixed(2)}`
       }
-      detailsAction={
-        <Button
-          type="button"
-          className="truncate hover:bg-accent/20 hover:text-accent"
-          onClick={handleShowDetails}
-          disabled={loadingDetails}
-        >
-          {loadingDetails ? "Loading details..." : "Show details"}
-        </Button>
-      }
       error={detailError && <p role="alert">{detailError}</p>}
       buildAction={
         <AddToBuildButton
           part={completePart}
-          className="hover:bg-accent/20 hover:text-accent"
+          className="hover:bg-accent/20 hover:text-accent mt-auto ml-auto max-w-100"
         />
       }
     />
diff --git a/frontend/src/components/PcPartCardLayout.tsx b/frontend/src/components/PcPartCardLayout.tsx
index 70fd031..6e4d42c 100644
--- a/frontend/src/components/PcPartCardLayout.tsx
+++ b/frontend/src/components/PcPartCardLayout.tsx
@@ -1,24 +1,24 @@
 import type { ReactNode } from "react";
 
 type PcPartCardLayoutProps = {
+  onShowDetails?: () => void;
   image: ReactNode;
   name: ReactNode;
   nameTitle?: string;
   category: ReactNode;
   price: ReactNode;
-  detailsAction: ReactNode;
   buildAction: ReactNode;
   error?: ReactNode;
   skeleton?: boolean;
 };
 //Layot for the PcPartCard and the PcPartCardSkeleton.
 export default function PcPartCardLayout({
+  onShowDetails,
   image,
   name,
   nameTitle,
   category,
   price,
-  detailsAction,
   buildAction,
   error,
   skeleton = false,
@@ -26,25 +26,61 @@ export default function PcPartCardLayout({
   return (
     <div
       aria-hidden={skeleton ? true : undefined}
-      className="@container min-w-0"
+      className="@container min-w-0 cursor-pointer motion-safe:hover:scale-102 motion-safe:active:scale-98 motion-safe:transition motion-safe:duration-300"
+      onClick={() => {
+        if (!skeleton) onShowDetails?.();
+      }}
     >
-      <article
+      <article tabIndex={skeleton ? undefined : 0}
         className={`flex w-full min-w-0 flex-col overflow-hidden rounded-xl bg-surface text-white @md:flex-row ${skeleton ? "motion-safe:animate-pulse" : ""}`}
+        onKeyDown={(event) => {
+          if (skeleton || event.target !== event.currentTarget) return;
+          if (event.key === "Enter" || event.key === " "){
+            event.preventDefault();
+            onShowDetails?.()
+          }
+        }}
       >
         <div
           className={`relative flex h-36 w-full items-center justify-center @md:h-auto @md:min-h-36 @md:w-44 @md:shrink-0 ${skeleton ? "bg-white/15" : "bg-white"}`}
         >
           {image}
         </div>
-        <div className="flex min-w-0 flex-1 flex-col gap-1 p-2">
-          <h2 className="min-h-5 truncate text-sm" title={nameTitle}>
-            {name}
-          </h2>
-          <p className="min-h-4 text-xs text-gray-200">{category}</p>
-          <p className="mb-1 min-h-7 text-xl">{price}</p>
-          <div className="mb-2">{detailsAction}</div>
-          {error}
-          {buildAction}
+
+        <div
+          className="grid min-w-0 flex-1 grid-cols-1 gap-2 p-2
+            @[500px]:grid-cols-[minmax(0,1fr)_auto]
+            @[500px]:grid-rows-[1fr_auto]
+            @[500px]:gap-3 @[500px]:p-3
+            @[800px]:grid-cols-[minmax(0,1fr)_auto_auto]
+            @[800px]:grid-rows-1
+            @[800px]:items-center @[800px]:gap-6 @[800px]:p-5"
+        >
+          <div className="min-w-0 @[500px]:col-span-2 @[800px]:col-span-1">
+            <h2
+              className="truncate text-sm @[500px]:text-lg"
+              title={nameTitle}
+            >
+              {name}
+            </h2>
+
+            <p className="text-xs text-gray-200 @[500px]:text-sm">
+              {category}
+            </p>
+
+            {error}
+          </div>
+
+          <p className="self-center whitespace-nowrap text-xl">
+            {price}
+          </p>
+
+          <div
+            className="min-w-0 self-center"
+            onClick={(event) => event.stopPropagation()}
+          >
+            {buildAction}
+          </div>
         </div>
       </article>
     </div>
diff --git a/frontend/src/components/PcPartCardSkeleton.tsx b/frontend/src/components/PcPartCardSkeleton.tsx
index 5844db6..b2d8cdb 100644
--- a/frontend/src/components/PcPartCardSkeleton.tsx
+++ b/frontend/src/components/PcPartCardSkeleton.tsx
@@ -14,7 +14,6 @@ export default function PcPartCardSkeleton() {
       name={<span className="inline-block h-3 w-4/5 rounded bg-white/20" />}
       category={<span className="inline-block h-2 w-1/3 rounded bg-white/10" />}
       price={<span className="inline-block h-5 w-24 rounded bg-white/20" />}
-      detailsAction={actionPlaceholder}
       buildAction={actionPlaceholder}
     />
   );
diff --git a/frontend/src/components/ViewSelector.tsx b/frontend/src/components/ViewSelector.tsx
index aad5bf8..30df8d4 100644
--- a/frontend/src/components/ViewSelector.tsx
+++ b/frontend/src/components/ViewSelector.tsx
@@ -1,13 +1,14 @@
-import { LayoutGrid, StretchHorizontal, Columns2 } from "lucide-react";
+import { Grip, List } from "lucide-react";
+import { DualListIcon } from "@/assets/dualListIcon";
 
 const viewOptions = ["list-view", "2-grid-view", "4-grid-view"] as const;
 
 export type ViewType = (typeof viewOptions)[number];
 
 const viewIcons = {
-  "list-view": StretchHorizontal,
-  "2-grid-view": Columns2,
-  "4-grid-view": LayoutGrid,
+  "list-view": List,
+  "2-grid-view": DualListIcon,
+  "4-grid-view": Grip,
 };
 
 const viewLabels = {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index aadc2ba..9455b2e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -45,6 +45,17 @@ body {
   }
 }
 
+@keyframes notification-slide-down {
+  from {
+    transform: translateY(calc(-100% - 6rem));
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 @keyframes feedback-slide-in {
   from {
     transform: translateX(calc(100% + 1rem));
diff --git a/frontend/src/pages/loginPage/loginPage.tsx b/frontend/src/pages/loginPage/loginPage.tsx
index c2aaccc..6363c1f 100644
--- a/frontend/src/pages/loginPage/loginPage.tsx
+++ b/frontend/src/pages/loginPage/loginPage.tsx
@@ -88,7 +88,7 @@ export default function LoginPage() {
 
   return (
     <section className="w-full text-white">
-      <div key={registering ? "register" : "login"} className="auth-form-enter">
+      <div key={registering ? "register" : "login"} className="auth-form-enter mx-auto max-w-md">
         <h1 className="text-center text-2xl font-semibold">
           {registering ? "Create account" : "Welcome back"}
         </h1>
diff --git a/frontend/src/test/PcPartCard.test.tsx b/frontend/src/test/PcPartCard.test.tsx
index 17904b6..8a314e0 100644
--- a/frontend/src/test/PcPartCard.test.tsx
+++ b/frontend/src/test/PcPartCard.test.tsx
@@ -50,14 +50,14 @@ it("retains specifications for reopening details and adding from the card", asyn
     <PcPartCard part={part} onShowDetails={onShowDetails} />,
   );
 
-  await user.click(screen.getByRole("button", { name: "Show details" }));
+  await user.click(screen.getByRole("article"));
   expect(onShowDetails).toHaveBeenCalledWith({ ...part, details });
 
   // Closing the parent's dialog leaves the same card mounted. A fresh summary
   // can also arrive without discarding its specifications or freezing its price.
   const updatedPart = { ...part, price_eur: 499 };
   rerender(<PcPartCard part={updatedPart} onShowDetails={onShowDetails} />);
-  await user.click(screen.getByRole("button", { name: "Show details" }));
+  await user.click(screen.getByRole("article"));
   expect(onShowDetails).toHaveBeenLastCalledWith({ ...updatedPart, details });
   await user.click(screen.getByRole("button", { name: "Add to build" }));
 
@@ -66,6 +66,7 @@ it("retains specifications for reopening details and adding from the card", asyn
     details,
   });
   expect(getPartSpecifications).toHaveBeenCalledTimes(1);
+  expect(onShowDetails).toHaveBeenCalledTimes(2);
 });
 
 it("shows an error and lets the user retry a failed details request", async () => {
@@ -76,17 +77,17 @@ it("shows an error and lets the user retry a failed details request", async () =
     .mockResolvedValueOnce(details);
   renderWithStore(<PcPartCard part={part} onShowDetails={onShowDetails} />);
 
-  await user.click(screen.getByRole("button", { name: "Show details" }));
+  await user.click(screen.getByRole("article"));
   expect(screen.getByRole("alert")).toHaveTextContent(
     "Could not load component details",
   );
   expect(onShowDetails).not.toHaveBeenCalled();
-  await user.click(screen.getByRole("button", { name: "Show details" }));
+  await user.click(screen.getByRole("article"));
   expect(onShowDetails).toHaveBeenCalledWith({ ...part, details });
   expect(screen.queryByRole("alert")).not.toBeInTheDocument();
 });
 
-it("disables repeat detail clicks and ignores a response after the card unmounts", async () => {
+it("ignores repeat card clicks and a response after the card unmounts", async () => {
   const user = userEvent.setup();
   const onShowDetails = vi.fn();
   let resolve!: (details: PcPart["details"]) => void;
@@ -99,10 +100,10 @@ it("disables repeat detail clicks and ignores a response after the card unmounts
     <PcPartCard part={part} onShowDetails={onShowDetails} />,
   );
 
-  await user.click(screen.getByRole("button", { name: "Show details" }));
-  expect(
-    screen.getByRole("button", { name: "Loading details..." }),
-  ).toBeDisabled();
+  await user.click(screen.getByRole("article"));
+  await user.click(screen.getByRole("article"));
+  expect(getPartSpecifications).toHaveBeenCalledTimes(1);
+  expect(onShowDetails).not.toHaveBeenCalled();
   const signal = vi.mocked(getPartSpecifications).mock.calls[0][1];
   unmount();
   expect(signal?.aborted).toBe(true);
@@ -113,8 +114,9 @@ it("disables repeat detail clicks and ignores a response after the card unmounts
 it("adds directly and removes the part through Redux without opening details", async () => {
   const user = userEvent.setup();
   vi.mocked(getPartSpecifications).mockResolvedValue(details);
+  const onShowDetails = vi.fn();
   const { store } = renderWithStore(
-    <PcPartCard part={part} onShowDetails={vi.fn()} />,
+    <PcPartCard part={part} onShowDetails={onShowDetails} />,
   );
 
   await user.click(screen.getByRole("button", { name: "Add to build" }));
@@ -132,4 +134,5 @@ it("adds directly and removes the part through Redux without opening details", a
     screen.getByRole("button", { name: "Add to build" }),
   ).toBeInTheDocument();
   expect(getPartSpecifications).toHaveBeenCalledTimes(1);
+  expect(onShowDetails).not.toHaveBeenCalled();
 });