Rework media display for Overseerr

Looks a lot better on mobile, fixes #502

src/components/layout/header/Search.tsx

@@ -13,6 +13,7 @@ import {
 import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { IconBrandYoutube, IconDownload, IconMovie, IconSearch } from '@tabler/icons';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useTranslation } from 'next-i18next';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
@@ -142,13 +143,25 @@ export function Search() {
   const [OverseerrResults, setOverseerrResults] = useState<any[]>([]);
   const [opened, setOpened] = useState(false);
 
-  useEffect(() => {
-    if (debounced !== '' && selectedSearchEngine.value === 'overseerr' && searchQuery.length > 3) {
-      axios.get(`/api/modules/overseerr?query=${searchQuery}`).then((res) => {
-        setOverseerrResults(res.data.results ?? []);
-      });
+  const { data, isLoading, error } = useQuery(
+    ['overseerr', debounced],
+    async () => {
+      if (debounced !== '' && selectedSearchEngine.value === 'overseerr' && debounced.length > 3) {
+        const res = await axios.get(`/api/modules/overseerr?query=${debounced}`);
+        return res.data.results ?? [];
       }
-  }, [debounced]);
+      return [];
+    },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchInterval: false,
+    }
+  );
+
+  useEffect(() => {
+    setOverseerrResults(data ?? []);
+  }, [data]);
 
   const isModuleEnabled = config?.settings.customization.layout.enabledSearchbar;
   if (!isModuleEnabled) {
@@ -207,16 +220,14 @@ export function Search() {
           />
         </Popover.Target>
         <Popover.Dropdown>
-          <div>
-            <ScrollArea style={{ height: 400, width: 420 }} offsetScrollbars>
-              {OverseerrResults.slice(0, 5).map((result, index) => (
+          <ScrollArea style={{ height: '80vh', maxWidth: '90vw' }} offsetScrollbars>
+            {OverseerrResults.slice(0, 4).map((result, index) => (
               <React.Fragment key={index}>
                 <OverseerrMediaDisplay key={result.id} media={result} />
-                  {index < OverseerrResults.length - 1 && <Divider variant="dashed" my="xl" />}
+                {index < OverseerrResults.length - 1 && index < 3 && <Divider variant="dashed" my="xs" />}
               </React.Fragment>
             ))}
           </ScrollArea>
-          </div>
         </Popover.Dropdown>
       </Popover>
     </Box>

src/modules/common/MediaDisplay.tsx

@@ -180,7 +180,7 @@ export function MediaDisplay({ media }: { media: IMedia }) {
   const { t } = useTranslation('modules/common-media-cards');
 
   return (
-    <Group mr="xs" align="stretch" noWrap style={{ maxHeight: 250, maxWidth: 400 }} spacing="xs">
+    <Group noWrap style={{ maxHeight: 250, maxWidth: 400 }} p={0} m={0} spacing="xs">
       <Image src={media.poster} height={200} width={150} radius="md" fit="cover" />
       <Stack justify="space-around">
         <Stack spacing="sm">
@@ -223,7 +223,7 @@ export function MediaDisplay({ media }: { media: IMedia }) {
             {media.overview}
           </Text>
         </Stack>
-        <Group noWrap>
+        <Group spacing="xs">
           {media.plexUrl && (
             <Button
               component="a"