adjust search bar for mobile

src/theme/SearchBar/SearchBar.module.scss

@@ -1,3 +1,11 @@
+@use '@site/src/css/utils';
+
 .root {
   position: relative;
 }
+
+@include utils.responsive('lg', 'down') {
+  .root {
+    position: unset;
+  }
+}

src/theme/SearchBar/SearchInput/SearchInput.module.scss

@@ -1,5 +1,7 @@
 // TODO: use ifm variables
 
+@use '@site/src/css/utils';
+
 .root {
   width: auto;
   position: relative;
@@ -72,3 +74,27 @@
     background-color: var(--ifm-background-color);
   }
 }
+
+@include utils.responsive('lg', 'down') {
+  .shortcuts {
+    display: none;
+  }
+
+  .root {
+    width: 100%;
+  }
+
+  .root input {
+    width: 100%;
+    border-radius: 12px;
+    background: #eeeef0;
+  }
+
+  .root.expanded input {
+    width: 100%;
+  }
+
+  .label {
+    display: none;
+  }
+}

src/theme/SearchBar/SearchInput/SearchInput.tsx

@@ -2,7 +2,7 @@ import { useOS } from '@site/src/lib/useOS'
 import { useWindowEventListener } from '@site/src/lib/useWindowEventListener'
 import clsx from 'clsx'
 import React from 'react'
-import {} from 'react-use'
+import { useMedia } from 'react-use'
 import styles from './SearchInput.module.scss'
 
 export type SearchInputProps = Omit<
@@ -30,6 +30,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
   ...props
 }) => {
   const os = useOS()
+  const isMobile = useMedia('(max-width: 996px)')
 
   const expanded = active || value?.length > 0
 
@@ -67,7 +68,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
         ref={inputRef}
         onFocus={onFocus}
         {...inputProps}
-        placeholder={expanded ? inputProps.placeholder : ''}
+        placeholder={expanded || isMobile ? inputProps.placeholder : ''}
       />
       <div className={styles.shortcuts}>
         {active ? (

src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss

@@ -1,3 +1,5 @@
+@use '@site/src/css/utils';
+
 .root {
   background-color: var(--ifm-background-surface-color);
   border-radius: 1rem;
@@ -19,3 +21,11 @@
     visibility: visible;
   }
 }
+
+@include utils.responsive('lg', 'down') {
+  .root {
+    width: 100vw;
+    margin-top: 0;
+    border-radius: 0;
+  }
+}