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.
This commit is contained in:
Thomas Piccirello 2025-07-06 11:50:54 -04:00 committed by GitHub
commit 15b8a81f92
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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>