fix: correct search page layout

klarna-incubator · Nov 25, 2024 · b81bb74 · b81bb74
1 parent aaf0098
commit b81bb74
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 25 deletions.
diff --git 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
@@ -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})</>}