Adjusted search result styles

morpheus65535 · Oct 31, 2024 · 0d63448 · 0d63448
1 parent 5272e70
commit 0d63448
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/frontend/src/App/Header.tsx b/frontend/src/App/Header.tsx
@@ -39,20 +39,20 @@ const AppHeader: FunctionComponent = () => {
     <AppShell.Header p="md" className={styles.header}>
       <Group justify="space-between" wrap="nowrap">
         <Group wrap="nowrap">
-          <Anchor onClick={goHome} visibleFrom="sm">
-            <Avatar
-              alt="brand"
-              size={32}
-              src={`${Environment.baseUrl}/images/logo64.png`}
-            ></Avatar>
-          </Anchor>
           <Burger
             opened={showed}
             onClick={() => show(!showed)}
             size="sm"
             hiddenFrom="sm"
           ></Burger>
-          <Badge size="lg" radius="sm" variant="brand">
+          <Anchor onClick={goHome}>
+            <Avatar
+              alt="brand"
+              size={32}
+              src={`${Environment.baseUrl}/images/logo64.png`}
+            ></Avatar>
+          </Anchor>
+          <Badge size="lg" radius="sm" variant="brand" visibleFrom="sm">
             Bazarr
           </Badge>
         </Group>

diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
@@ -2,11 +2,14 @@ import { FunctionComponent, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   ComboboxItem,
+  em,
+  Flex,
   Image,
   OptionsFilter,
   Select,
   Text,
 } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useServerSearch } from "@/apis/hooks";
@@ -85,6 +88,8 @@ const Search: FunctionComponent = () => {
 
   const results = useSearch(query);
 
+  const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
+
   return (
     <Select
       placeholder="Search"
@@ -109,10 +114,12 @@ const Search: FunctionComponent = () => {
         const result = results.find((r) => r.value === input.option.value);
 
         return (
-          <>
-            <Image src={result?.poster} w={35} h={50} />
-            <Text p="xs">{result?.label}</Text>
-          </>
+          <Flex>
+            <Image src={result?.poster} w={55} h={70} />
+            <Text size={isMobile ? "xs" : "md"} pl="xs" pr="xs" lineClamp={3}>
+              {result?.label}
+            </Text>
+          </Flex>
         );
       }}
     />