diff options
| -rw-r--r-- | frontend/src/App/Header.tsx | 16 | ||||
| -rw-r--r-- | frontend/src/components/Search.tsx | 15 |
2 files changed, 19 insertions, 12 deletions
diff --git a/frontend/src/App/Header.tsx b/frontend/src/App/Header.tsx index 29c1d1a8d..987218ef8 100644 --- 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 index 9571d9f2b..d1c559be5 100644 --- 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> ); }} /> |