Fixed: (UI) Improved mobile search form and show indexer flags

frontend/src/Search/Mobile/SearchIndexOverview.js

@@ -12,6 +12,7 @@ import Peers from 'Search/Table/Peers';
 import dimensions from 'Styles/Variables/dimensions';
 import formatAge from 'Utilities/Number/formatAge';
 import formatBytes from 'Utilities/Number/formatBytes';
+import titleCase from 'Utilities/String/titleCase';
 import translate from 'Utilities/String/translate';
 import styles from './SearchIndexOverview.css';
 
@@ -78,6 +79,7 @@ class SearchIndexOverview extends Component {
       categories,
       seeders,
       leechers,
+      indexerFlags,
       size,
       age,
       ageHours,
@@ -107,7 +109,6 @@ class SearchIndexOverview extends Component {
                     text={title}
                   />
                 </Link>
-
               </div>
 
               <div className={styles.actions}>
@@ -155,6 +156,20 @@ class SearchIndexOverview extends Component {
               <CategoryLabel
                 categories={categories}
               />
+
+              {
+                indexerFlags.length ?
+                  indexerFlags
+                    .sort((a, b) => a.localeCompare(b))
+                    .map((flag, index) => {
+                      return (
+                        <Label key={index} kind={kinds.INFO}>
+                          {titleCase(flag)}
+                        </Label>
+                      );
+                    }) :
+                  null
+              }
             </div>
           </div>
         </div>

frontend/src/Search/SearchFooter.css

@@ -24,7 +24,8 @@
   flex-grow: 1;
 }
 
-.searchButton {
+.searchButton,
+.grabReleasesButton {
   composes: button from '~Components/Link/SpinnerButton.css';
 
   margin-left: 25px;
@@ -32,18 +33,20 @@
 }
 
 .selectedReleasesLabel {
-  margin-bottom: 3px;
+  margin-bottom: 5px;
   text-align: right;
   font-weight: bold;
 }
 
 @media only screen and (max-width: $breakpointSmall) {
-  .inputContainer {
+  .inputContainer,
+  .indexerContainer {
     margin-right: 0;
   }
 
   .buttonContainer {
     justify-content: flex-start;
+    margin-top: 10px;
   }
 
   .buttonContainerContent {
@@ -52,5 +55,20 @@
 
   .buttons {
     justify-content: space-between;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .grabReleasesButton,
+  .searchButton {
+    margin-left: 0;
+  }
+
+  .grabReleasesButton {
+    display: none;
+  }
+
+  .selectedReleasesLabel {
+    text-align: center;
   }
 }

frontend/src/Search/SearchFooter.css.d.ts

@@ -4,6 +4,7 @@ interface CssExports {
   'buttonContainer': string;
   'buttonContainerContent': string;
   'buttons': string;
+  'grabReleasesButton': string;
   'indexerContainer': string;
   'inputContainer': string;
   'searchButton': string;

frontend/src/Search/SearchFooter.js

@@ -259,11 +259,10 @@ class SearchFooter extends Component {
             />
 
             <div className={styles.buttons}>
-
               {
                 isPopulated &&
                   <SpinnerButton
-                    className={styles.searchButton}
+                    className={styles.grabReleasesButton}
                     kind={kinds.SUCCESS}
                     isSpinning={isGrabbing}
                     isDisabled={isFetching || !hasIndexers || selectedCount === 0}