From b81bb7475fa2a41da8ce1918ac9b981d40bde92e Mon Sep 17 00:00:00 2001
From: Joakim Uddholm <joakim.uddholm@klarna.com>
Date: Mon, 25 Nov 2024 16:21:43 +0100
Subject: [PATCH] fix: correct search page layout

---
 app/src/components/search/SearchPage.js      | 44 ++++++++++----------
 app/src/components/search/SearchResultBox.js |  4 +-
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/src/components/search/SearchPage.js b/app/src/components/search/SearchPage.js
index 1c765eac..149d15e9 100644
--- a/app/src/components/search/SearchPage.js
+++ b/app/src/components/search/SearchPage.js
@@ -16,29 +16,27 @@ export default function SearchPage() {
 
   return (
     <CenteredPage>
-      <Card sx={{ maxWidth: "md" }}>
-        <CardContent>
-          <Typography variant="h5">
-            Search results for "{queryValue}"
-          </Typography>
-        </CardContent>
-      </Card>
-      <br />
-      <Divider />
-      <br />
-      <>
-        {!isLoading ? (
-          <Grid container spacing={2}>
-            {data?.map((searchType) => (
-              <Grid size={{ md: 4 }}>
-                <SearchResultBox searchText={queryValue} type={searchType} />
-              </Grid>
-            ))}
-          </Grid>
-        ) : (
-          <Loading />
-        )}
-      </>
+      <Grid size={12}>
+        <Card>
+          <CardContent>
+            <Typography variant="h5">
+              Search results for "{queryValue}"
+            </Typography>
+          </CardContent>
+        </Card>
+      </Grid>
+
+      {!isLoading ? (
+        <>
+          {data?.map((searchType) => (
+            <Grid size={4}>
+              <SearchResultBox searchText={queryValue} type={searchType} />
+            </Grid>
+          ))}
+        </>
+      ) : (
+        <Loading />
+      )}
     </CenteredPage>
   );
 }
diff --git a/app/src/components/search/SearchResultBox.js b/app/src/components/search/SearchResultBox.js
index 08fcbbae..42582661 100644
--- a/app/src/components/search/SearchResultBox.js
+++ b/app/src/components/search/SearchResultBox.js
@@ -25,7 +25,7 @@ export function SearchResultBox({ searchText, type }) {
 
   if (isFetching || isLoading) {
     return (
-      <Card sx={{ maxWidth: "sm" }}>
+      <Card>
         <CardContent>
           <Typography variant="h5">{type.label}s</Typography>
           <br />
@@ -36,7 +36,7 @@ export function SearchResultBox({ searchText, type }) {
   }
 
   return (
-    <Card sx={{ maxWidth: "sm" }}>
+    <Card>
       <CardContent>
         <Typography variant="h5">
           {type.label}s {r.count > 0 && <>({r.count})</>}