💄 Improve movie modal cards and layout

src/components/layout/header/MovieModal.tsx

@@ -1,7 +1,9 @@
 import {
   Button,
+  Card,
   Center,
   Divider,
+  Grid,
   Group,
   Loader,
   Image as MantineImage,
@@ -50,7 +52,7 @@ export const MovieModal = ({ opened, closeModal }: MovieModalProps) => {
     <Modal
       opened={opened}
       onClose={closeModal}
-      size="lg"
+      size="100%"
       scrollAreaComponent={ScrollArea.Autosize}
       title={
         <Group>
@@ -73,6 +75,7 @@ const MovieResults = ({ search, type }: MovieResultsProps) => {
       query: search,
       configName: configName!,
       integration: type,
+      limit: 12,
     },
     {
       refetchOnWindowFocus: false,
@@ -93,14 +96,13 @@ const MovieResults = ({ search, type }: MovieResultsProps) => {
       <Text>
         Top {overseerrResults?.length} results for <b>{search}</b>
       </Text>
-      <Stack spacing="xs">
+      <Grid gutter={32}>
         {overseerrResults?.map((result, index: number) => (
-          <React.Fragment key={index}>
+          <Grid.Col key={index} span={12} sm={6} lg={4}>
             <MovieDisplay movie={result} type={type} />
-            {index < overseerrResults.length - 1 && <Divider variant="dashed" my="xs" />}
+          </Grid.Col>
-          </React.Fragment>
         ))}
-      </Stack>
+      </Grid>
     </Stack>
   );
 };
@@ -125,72 +127,75 @@ const MovieDisplay = ({ movie, type }: MovieDisplayProps) => {
   const serviceUrl = service?.behaviour.externalUrl ? service.behaviour.externalUrl : service?.url;
 
   return (
-    <Group noWrap style={{ maxHeight: 250 }} p={0} m={0} spacing="xs" align="stretch">
+    <Card withBorder>
-      <MantineImage
+      <Group noWrap style={{ maxHeight: 250 }} p={0} m={0} spacing="xs" align="stretch">
-        withPlaceholder
+        <MantineImage
-        src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2/${
+          withPlaceholder
-          movie.posterPath ?? movie.backdropPath
+          src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2/${
-        }`}
+            movie.posterPath ?? movie.backdropPath
-        height={200}
+          }`}
-        width={150}
+          height={200}
-        radius="md"
+          width={150}
-        fit="cover"
+          radius="md"
-      />
+          fit="cover"
-      <Stack justify="space-between">
+        />
-        <Stack spacing={4}>
+        <Stack justify="space-between">
-          <Title lineClamp={2} order={5}>
+          <Stack spacing={4}>
-            {movie.title ?? movie.name ?? movie.originalName}
+            <Title lineClamp={2} order={5}>
-          </Title>
+              {movie.title ?? movie.name ?? movie.originalName}
-          <Text color="dimmed" size="xs" lineClamp={4}>
+            </Title>
-            {movie.overview}
+            <Text color="dimmed" size="xs" lineClamp={4}>
-          </Text>
+              {movie.overview}
-        </Stack>
+            </Text>
-        <Group spacing="xs">
+          </Stack>
-          {!movie.mediaInfo?.mediaAddedAt && (
+
-            <>
+          <Group spacing="xs">
-              <RequestModal
+            {!movie.mediaInfo?.mediaAddedAt && (
-                base={movie}
+              <>
-                opened={requestModalOpened}
+                <RequestModal
-                setOpened={requestModal.toggle}
+                  base={movie}
-              />
+                  opened={requestModalOpened}
+                  setOpened={requestModal.toggle}
+                />
+                <Button
+                  onClick={() => {
+                    requestModal.open();
+                  }}
+                  variant="light"
+                  size="sm"
+                  rightIcon={<IconDownload size={15} />}
+                >
+                  {t('buttons.request')}
+                </Button>
+              </>
+            )}
+            {mediaUrl && (
               <Button
-                onClick={() => {
+                component="a"
-                  requestModal.open();
+                target="_blank"
-                }}
                 variant="light"
+                href={mediaUrl}
                 size="sm"
-                rightIcon={<IconDownload size={15} />}
+                rightIcon={<IconPlayerPlay size={15} />}
               >
-                {t('buttons.request')}
+                {t('buttons.play')}
               </Button>
-            </>
+            )}
-          )}
+            {serviceUrl && (
-          {mediaUrl && (
+              <Button
-            <Button
+                component="a"
-              component="a"
+                target="_blank"
-              target="_blank"
+                href={serviceUrl}
-              variant="outline"
+                variant="outline"
-              href={mediaUrl}
+                size="sm"
-              size="sm"
+                rightIcon={<IconExternalLink size={15} />}
-              rightIcon={<IconPlayerPlay size={15} />}
+              >
-            >
+                TMDb
-              {t('buttons.play')}
+              </Button>
-            </Button>
+            )}
-          )}
+          </Group>
-          {serviceUrl && (
+        </Stack>
-            <Button
+      </Group>
-              component="a"
+    </Card>
-              target="_blank"
-              href={serviceUrl}
-              variant="outline"
-              size="sm"
-              rightIcon={<IconExternalLink size={15} />}
-            >
-              TMDb
-            </Button>
-          )}
-        </Group>
-      </Stack>
-    </Group>
   );
 };