From 1391a3d022860d6b8358fafa2ed40ad42f30cf17 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Mon, 31 Jul 2023 23:27:11 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Improve=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/new-header/Header.tsx | 24 ++++++++++++++++++---
 src/components/layout/new-header/search.tsx |  8 +++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/new-header/Header.tsx b/src/components/layout/new-header/Header.tsx
index fa243b2ba..67b4933de 100644
--- a/src/components/layout/new-header/Header.tsx
+++ b/src/components/layout/new-header/Header.tsx
@@ -1,4 +1,13 @@
-import { Box, Flex, Group, Header, Text, UnstyledButton, useMantineTheme } from '@mantine/core';
+import {
+  Box,
+  Center,
+  Flex,
+  Group,
+  Header,
+  Text,
+  UnstyledButton,
+  useMantineTheme,
+} from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import Link from 'next/link';
@@ -24,7 +33,10 @@ export const MainHeader = ({
   const { breakpoints } = useMantineTheme();
   const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
   const experimentalHeaderNoteHeight = isSmallerThanMd ? 50 : 30;
-  const headerHeight = showExperimental ? 60 + experimentalHeaderNoteHeight : 60;
+  const headerBaseHeight = isSmallerThanMd ? 60 + 46 : 60;
+  const headerHeight = showExperimental
+    ? headerBaseHeight + experimentalHeaderNoteHeight
+    : headerBaseHeight;
 
   return (
     <Header height={headerHeight} pb="sm" pt={0}>
@@ -37,7 +49,7 @@ export const MainHeader = ({
           </UnstyledButton>
         </Group>
 
-        <Search />
+        {!isSmallerThanMd && <Search />}
 
         <Group noWrap style={{ flex: 1 }} position="right">
           <Group noWrap spacing={8}>
@@ -46,6 +58,12 @@ export const MainHeader = ({
           <AvatarMenu />
         </Group>
       </Group>
+
+      {isSmallerThanMd && (
+        <Center mt="xs" px="md">
+          <Search isMobile />
+        </Center>
+      )}
     </Header>
   );
 };
diff --git a/src/components/layout/new-header/search.tsx b/src/components/layout/new-header/search.tsx
index ab3a0c748..b919a3407 100644
--- a/src/components/layout/new-header/search.tsx
+++ b/src/components/layout/new-header/search.tsx
@@ -15,7 +15,11 @@ import { api } from '~/utils/api';
 
 import { MovieModal } from './MovieModal';
 
-export const Search = () => {
+type SearchProps = {
+  isMobile?: boolean;
+};
+
+export const Search = ({ isMobile }: SearchProps) => {
   const [search, setSearch] = useState('');
   const ref = useRef<HTMLInputElement>(null);
   useHotkeys([['mod+K', () => ref.current?.focus()]]);
@@ -40,7 +44,7 @@ export const Search = () => {
       <Autocomplete
         ref={ref}
         radius="xl"
-        w={400}
+        w={isMobile ? '100%' : 400}
         variant="filled"
         placeholder="Search..."
         hoverOnSearchChange