fix: mobile search

components/main/MainContent.vue

@@ -4,6 +4,7 @@ defineProps<{
   backOnSmallScreen?: boolean
   /** Show the back button on both small and big screens */
   back?: boolean
+  noOverflowHidden?: boolean
 }>()
 </script>
 
@@ -15,7 +16,7 @@ defineProps<{
       border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]"
     >
       <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }">
-        <div flex gap-3 items-center overflow-hidden py2>
+        <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden" py2>
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
             :aria-label="$t('nav.back')"
@@ -23,7 +24,7 @@ defineProps<{
           >
             <div i-ri:arrow-left-line class="rtl-flip" />
           </NuxtLink>
-          <div truncate>
+          <div :truncate="!noOverflowHidden">
             <slot name="title" />
           </div>
           <div h-7 w-1px />

components/nav/NavSide.vue

@@ -37,7 +37,7 @@ const { notifications } = useNotifications()
 
     <div shrink hidden sm:block mt-4 />
     <NavSideItem v-if="!isExploreRoute()" :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" hidden xl:block :command="command" />
-    <SearchWidget v-else ref="search" lg:ms-1 lg:me-5 lg:mb-1 hidden xl:block />
+    <SearchWidget v-else-if="!isSmallScreen" ref="search" lg:ms-1 lg:me-5 lg:mb-1 hidden xl:block />
     <NavSideItem :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" xl:hidden :command="command" />
 
     <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />

pages/[[server]]/explore.vue

@@ -24,11 +24,9 @@ const tabs = $computed(() => [
 </script>
 
 <template>
-  <MainContent>
+  <MainContent no-overflow-hidden>
     <template #title>
-      <span timeline-title-style flex @click="$scrollToTop">
-        <SearchWidget ref="search" />
-      </span>
+      <SearchWidget ref="search" flex-grow class="m-1" />
     </template>
 
     <template #header>

pages/search.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-useHeadFixed({
-  title: () => t('nav.search'),
-})
-</script>
-
-<template>
-  <MainContent>
-    <template #title>
-      <NuxtLink to="/search" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:search-line class="rtl-flip" />
-        <span>{{ $t('nav.search') }}</span>
-      </NuxtLink>
-    </template>
-
-    <div px2 mt3>
-      <SearchWidget v-if="isHydrated" />
-    </div>
-  </MainContent>
-</template>