feat: Improved filterbar for narrowed viewports (#5828)

web/assets/css/transmission-app.scss

@@ -277,12 +277,6 @@ a {
   overflow: auto;
 }
 
-input {
-  border: 1px solid var(--color-border);
-  border-radius: 3px;
-  padding: 4px 5px;
-}
-
 /// TOOLBAR
 
 $toolbar-height-number: 50;
@@ -366,46 +360,40 @@ $toolbar-height: $toolbar-height-number * 1px;
 /// FILTERBAR
 
 .mainwin-filterbar {
+  white-space: nowrap;
   align-items: center;
   background: var(--color-toolbar-background);
   border-bottom: 1px solid var(--color-default-border);
   display: flex;
   flex-direction: row;
   height: 30px;
-  width: 100%;
+  padding-left: 5px;
 
   @include for-phone-only {
-    padding: 5px 10px;
-
-    :not(select):not(input):not(option) {
+    :not(select):not(input):not(option):not(.flexible-space) {
       display: none;
     }
+  }
 
-    #torrent-search {
-      padding: 5px;
-    }
+  #torrent-search {
+    width: 100%;
+    max-width: 160px;
+  }
+
+  select {
+    width: 70px;
   }
 
   > * {
     margin-right: 5px;
-    padding: 0 5px;
   }
 }
 
 $speed-icon-size: 20px;
 
-.speed-up-icon {
-  fill: var(--color-fg-primary);
-  margin: 0 auto;
-
-  svg {
-    width: $speed-icon-size;
-  }
-}
-
+.speed-up-icon,
 .speed-dn-icon {
   fill: var(--color-fg-primary);
-  margin: 0 auto;
 
   svg {
     width: $speed-icon-size;
@@ -414,7 +402,6 @@ $speed-icon-size: 20px;
 
 #speed-dn-label,
 #speed-up-label {
-  width: 70px;
   text-align: right;
 }
 
@@ -426,8 +413,8 @@ $progressbar-border: 1;
 $progressbar-height: 20;
 $popup-top: 51px; // TODO: ugly that this is hardcoded
 
-.flex {
-  flex-grow: 1;
+.flexible-space {
+  margin-right: auto;
 }
 
 #torrent-container {
@@ -791,11 +778,6 @@ $video-image: '../img/film.svg';
 /// PREFERENCES DIALOG
 
 @include for-phone-only {
-  html,
-  body {
-    overflow: hidden;
-  }
-
   input[type='checkbox'] {
     height: 20px;
     width: 20px;
@@ -1389,7 +1371,7 @@ $video-image: '../img/film.svg';
   top: 50px;
   z-index: $z-index-popup;
 
-  @include for-phone-only() {
+  @include for-phone-only {
     height: 80vh;
   }
 
@@ -1625,7 +1607,7 @@ dialog {
   padding: 0;
   z-index: $z-index-popup;
 
-  @include for-tablet-portrait-up() {
+  @include for-tablet-portrait-up {
     border: 0;
     border-radius: 8px;
     max-width: 50%;

web/public_html/index.html

@@ -201,6 +201,7 @@
         <select id="filter-tracker"></select>
         <input type="search" id="torrent-search" placeholder="Filter" />
         <span id="filter-count">&nbsp;</span>
+        <span class="flexible-space"></span>
         <span class="flex"></span>
         <div class="speed-dn-icon">
           <svg