From 806acee4d114697b7868f34bdb974d1a865615cc Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 8 May 2026 14:28:21 +0200
Subject: [PATCH] appview: make quick-search more responsive

Signed-off-by: eti <eti@eti.tf>
---
 .../templates/layouts/fragments/topbar.html      | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index 56581e56..ee03ffad 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -11,7 +11,7 @@
                 {{ with .LoggedInUser }}
                     <div class="flex items-center order-1 md:order-3">{{ block "newButton" . }} {{ end }}</div>
                     <div class="flex items-center order-2 md:order-4">{{ template "notifications/fragments/bell" }}</div>
-                    <div class="flex items-center order-3 md:order-1">{{ block "searchButton" . }} {{ end }}</div>
+                    <div class="flex items-center order-3 md:order-1">{{ block "search" . }} {{ end }}</div>
                     <div class="hidden md:block md:order-2 w-px h-6 bg-gray-200 dark:bg-gray-700 self-center"></div>
                     <div class="flex items-center order-4 md:order-5">{{ block "profileDropdown" . }} {{ end }}</div>
                 {{ else }}
@@ -44,9 +44,9 @@
 </details>
 {{ end }}
 
-{{ define "searchButton" }}
+{{ define "search" }}
 <div class="relative hidden md:block" id="topbar-search-container">
-  <div id="topbar-search-box" class="relative flex items-center gap-2 px-2 pr-1.5 py-4 max-h-[30px] w-80 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 focus-within:z-[51] before:content-[''] before:absolute before:inset-0 before:rounded-md before:invisible focus-within:before:visible before:ring-2 before:ring-transparent before:ring-offset-transparent before:ring-offset-1 before:pointer-events-none focus-within:before:ring-gray-300 dark:focus-within:before:ring-gray-600">
+  <div id="topbar-search-box" class="relative flex items-center gap-2 px-2 pr-1.5 py-4 max-h-[30px] md:w-80 lg:w-96 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 focus-within:z-[51] before:content-[''] before:absolute before:inset-0 before:rounded-md before:invisible focus-within:before:visible before:ring-2 before:ring-transparent before:ring-offset-transparent before:ring-offset-1 before:pointer-events-none focus-within:before:ring-gray-300 dark:focus-within:before:ring-gray-600">
     {{ i "search" "size-4 text-gray-400" }}
     <input
       type="text"
@@ -61,17 +61,17 @@
       hx-swap="innerHTML"
       hx-indicator="#topbar-search-indicator"
     />
-    <kbd class="pointer-events-none flex items-center shrink-0 text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden">⌘K</kbd>
+    <kbd class="pointer-events-none flex items-center text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden">⌘K</kbd>
     <span id="topbar-search-indicator" class="shrink-0">
       {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
     </span>
     <button
       type="button"
-      class="shrink-0 hidden peer-[:not(:placeholder-shown)]:block text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+      class="hidden peer-[:not(:placeholder-shown)]:block text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
       onclick="const i=document.getElementById('topbar-search-input');i.value='';htmx.trigger(i,'input');i.focus()"
     >{{ i "x" "size-4" }}</button>
   </div>
-  <div id="topbar-search-results" class="absolute right-0 top-full z-50 w-80"></div>
+  <div id="topbar-search-results" class="absolute w-full z-50"></div>
 </div>
 
 <button id="mobile-search-btn" class="md:hidden" type="button" data-action="open-mobile-search">
@@ -105,12 +105,12 @@
     <span id="mobile-search-indicator" class="shrink-0">
       {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
     </span>
-    <button type="button" class="shrink-0 p-1 -mr-1 hit-area hit-area-4" data-action="close-mobile-search">
+    <button type="button" class="p-1 -mr-1 hit-area hit-area-4" data-action="close-mobile-search">
       {{ i "x" "size-5 text-gray-400" }}
     </button>
   </div>
   <div id="mobile-search-results" class="flex-1 flex flex-col overflow-hidden pb-[env(safe-area-inset-bottom)]"></div>
-  <div id="mobile-search-spacer" class="shrink-0 bg-gray-50 dark:bg-gray-800 hidden"></div>
+  <div id="mobile-search-spacer" class="bg-gray-50 dark:bg-gray-800 hidden"></div>
 </div>
 <style>
   #topbar-search-indicator,
-- 
2.51.2