fix: don't autofocus search on mobile

Author: danielroe

app/components/SearchBox.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
 
+const isMobile = useIsMobile()
+
 withDefaults(
   defineProps<{
     inputClass?: string
@@ -84,7 +86,7 @@ function handleSearchFocus() {
 
           <input
             id="header-search"
-            autofocus
+            :autofocus="!isMobile"
             v-model="searchQuery"
             type="search"
             name="q"

app/composables/useIsMobile.ts

@@ -0,0 +1,10 @@
+/**
+ * Composable for detecting mobile devices using media query.
+ * Uses the same breakpoint as Tailwind's `md:` (768px).
+ *
+ * Returns `false` during SSR to avoid hydration mismatches.
+ * @public
+ */
+export function useIsMobile() {
+  return useMediaQuery('(max-width: 767px)')
+}

app/pages/index.vue

@@ -6,6 +6,8 @@ const searchQuery = ref('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
 
+const isMobile = useIsMobile()
+
 const debouncedNavigate = debounce(() => {
   router.push({
     path: '/search',
@@ -76,7 +78,7 @@ defineOgImageComponent('Default')
                 name="q"
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
-                autofocus
+                :autofocus="!isMobile"
                 class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                 @input="handleSearch"
               />