From 15b8a81f9201ce6ce1bb7999896fd02e7de75e65 Mon Sep 17 00:00:00 2001
From: Thomas Piccirello <8296030+Piccirello@users.noreply.github.com>
Date: Sun, 6 Jul 2025 11:50:54 -0400
Subject: [PATCH] WebUI: Improve search page experience on mobile

This change better handles resizing of elements on the search page to ensure no controls are hidden at typical mobile screen sizes.
Improvements seen below:
- "Search" button is now accessible
- Content no longer overflows w/ "Search plugins..." button pushed offscreen
- Tabs overflow horizontally and are scrollable, rather than pushing down the search results table

PR #22916.
---
 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>