From c154ff9ba8e7e8413df56a452bf5ce9ec1c1fb9d Mon Sep 17 00:00:00 2001
From: Massedil <massedil-framagit.org@msd.im>
Date: Fri, 14 Feb 2025 13:21:14 +0100
Subject: [PATCH] #1680 Improved display of the search bar

---
 src/components/Home/ShortSearch.vue | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/Home/ShortSearch.vue b/src/components/Home/ShortSearch.vue
index f34cbfcc3..34b84ad94 100644
--- a/src/components/Home/ShortSearch.vue
+++ b/src/components/Home/ShortSearch.vue
@@ -1,27 +1,28 @@
 <template>
   <form
     id="short-search"
-    class="container mx-auto my-3 px-2 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center justify-center dark:text-slate-100"
+    class="container mx-auto p-2 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 justify-center dark:text-slate-100"
     role="search"
     @submit.prevent="submit"
   >
     <label class="sr-only" for="short_search_field_input">{{
       t("Keyword, event title, group name, etc.")
     }}</label>
-    <o-input
-      v-model="search"
-      :placeholder="t('Keyword, event title, group name, etc.')"
-      class="max-w-md"
-      id="short_search_field_input"
-      autofocus
-      autocapitalize="off"
-      autocomplete="off"
-      autocorrect="off"
-      maxlength="1024"
-      expanded
-    />
+    <div class="flex-auto sm:max-w-xl">
+      <o-input
+        v-model="search"
+        :placeholder="t('Keyword, event title, group name, etc.')"
+        id="short_search_field_input"
+        autofocus
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        maxlength="1024"
+        expanded
+      />
+    </div>
     <o-button
-      class="search-Event min-w-40 mr-1 mb-1"
+      class="search-Event min-w-40 sm:w-auto"
       native-type="submit"
       icon-left="magnify"
     >