From 922d3765a40ec6bb6cddd7b7d85577b55fcd2b27 Mon Sep 17 00:00:00 2001
From: Thomas Piccirello <thomas@piccirello.com>
Date: Tue, 24 Jun 2025 16:00:25 -0700
Subject: [PATCH] WebUI: Improve search page experience on mobile

---
 src/webui/www/private/views/search.html | 29 ++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/webui/www/private/views/search.html b/src/webui/www/private/views/search.html
index 1a4800e0d..b26736826 100644
--- a/src/webui/www/private/views/search.html
+++ b/src/webui/www/private/views/search.html
@@ -1,6 +1,6 @@
 <style>
     #searchPattern {
-        width: 300px;
+        width: 180px;
         background-image: url("images/edit-find.svg");
         background-repeat: no-repeat;
         background-size: 1.5em;
@@ -70,6 +70,25 @@
         margin: 0 5px -3px 0;
     }
 
+    #searchResultsHeader {
+        height: 60px;
+        overflow: hidden;
+    }
+
+    #searchResultsHeaderContainer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+        margin-top: 4px;
+        height: 24px;
+    }
+
+    @media (min-width: 760px) {
+        #searchPattern {
+            width: 300px;
+        }
+    }
+
     @media (min-width: 1060px) {
         #searchResultsGranularFilters {
             display: inline-block;
@@ -82,13 +101,17 @@
         #searchPattern {
             width: 500px;
         }
+
+        #searchResultsHeaderContainer {
+            margin: 20px 0 10px 0;
+        }
     }
 
 </style>
 
 <div id="searchResults">
-    <div style="overflow: hidden; height: 60px;">
-        <div style="display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0 10px 0; height: 24px;">
+    <div id="searchResultsHeader">
+        <div id="searchResultsHeaderContainer">
             <input type="search" id="searchPattern" class="searchInputField" placeholder="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocomplete="off" autocapitalize="none" oninput="qBittorrent.Search.onSearchPatternChanged()">
             <select id="categorySelect" class="searchInputField" aria-label="QBT_TR(Select category)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.categorySelected()"></select>
             <select id="pluginsSelect" class="searchInputField" aria-label="QBT_TR(Select plugins)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.pluginSelected()"></select>