💄 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,6 +127,7 @@ const MovieDisplay = ({ movie, type }: MovieDisplayProps) => {
   const serviceUrl = service?.behaviour.externalUrl ? service.behaviour.externalUrl : service?.url;
 
   return (
+    <Card withBorder>
       <Group noWrap style={{ maxHeight: 250 }} p={0} m={0} spacing="xs" align="stretch">
         <MantineImage
           withPlaceholder
@@ -145,6 +148,7 @@ const MovieDisplay = ({ movie, type }: MovieDisplayProps) => {
               {movie.overview}
             </Text>
           </Stack>
+
           <Group spacing="xs">
             {!movie.mediaInfo?.mediaAddedAt && (
               <>
@@ -169,7 +173,7 @@ const MovieDisplay = ({ movie, type }: MovieDisplayProps) => {
               <Button
                 component="a"
                 target="_blank"
-              variant="outline"
+                variant="light"
                 href={mediaUrl}
                 size="sm"
                 rightIcon={<IconPlayerPlay size={15} />}
@@ -192,5 +196,6 @@ const MovieDisplay = ({ movie, type }: MovieDisplayProps) => {
           </Group>
         </Stack>
       </Group>
+    </Card>
   );
 };