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 ?? [];
+      }
+      return [];
+    },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchInterval: false,
     }
-  }, [debounced]);
+  );
+
+  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) => (
-                <React.Fragment key={index}>
-                  <OverseerrMediaDisplay key={result.id} media={result} />
-                  {index < OverseerrResults.length - 1 && <Divider variant="dashed" my="xl" />}
-                </React.Fragment>
-              ))}
-            </ScrollArea>
-          </div>
+          <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 && index < 3 && <Divider variant="dashed" my="xs" />}
+              </React.Fragment>
+            ))}
+          </ScrollArea>
         </Popover.Dropdown>
       </Popover>
     </Box>