� Update search bar styling

src/components/SearchBar/SearchBar.tsx

@@ -1,9 +1,19 @@
-import { TextInput, Text, Popover, Kbd, Group } from '@mantine/core';
+import { TextInput, Kbd, createStyles, useMantineTheme, Text, Popover } from '@mantine/core';
 import { useForm, useHotkeys } from '@mantine/hooks';
 import { useRef, useState } from 'react';
 import { Search, BrandYoutube, Download } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
 
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('sm')]: {
+      display: 'none',
+    },
+    display: 'flex',
+    alignItems: 'center',
+  },
+}));
+
 export default function SearchBar(props: any) {
   const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
@@ -12,8 +22,10 @@ export default function SearchBar(props: any) {
   const textInput: any = useRef(null);
   useHotkeys([['ctrl+K', () => textInput.current.focus()]]);
 
+  const { classes, cx } = useStyles();
+  const theme = useMantineTheme();
   const rightSection = (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
+    <div className={classes.hide}>
       <Kbd>Ctrl</Kbd>
       <span style={{ margin: '0 5px' }}>+</span>
       <Kbd>K</Kbd>
@@ -71,22 +83,19 @@ export default function SearchBar(props: any) {
         onFocusCapture={() => setOpened(true)}
         onBlurCapture={() => setOpened(false)}
         target={
-          <Group direction="row">
+          <TextInput
-            <TextInput
+            variant="filled"
-              width={'100%'}
+            icon={icon}
-              variant="filled"
+            ref={textInput}
-              icon={icon}
+            rightSectionWidth={90}
-              ref={textInput}
+            rightSection={rightSection}
-              rightSectionWidth={90}
+            radius="md"
-              rightSection={rightSection}
+            size="md"
-              radius="md"
+            styles={{ rightSection: { pointerEvents: 'none' } }}
-              size="md"
+            placeholder="Search the web..."
-              styles={{ rightSection: { pointerEvents: 'none' } }}
+            {...props}
-              placeholder="Search the web..."
+            {...form.getInputProps('query')}
-              {...props}
+          />
-              {...form.getInputProps('query')}
-            />
-          </Group>
         }
       >
         <Text>