Fixed: Responsive add indexer modal layout filters

frontend/src/Indexer/Add/AddIndexerModalContent.css

@@ -76,10 +76,6 @@
   background-color: var(--hoverBackgroundColor);
 }
 
-.filterRowCollapsed {
-  display: none !important;
-}
-
 @media only screen and (max-width: $breakpointSmall) {
   .filterInput {
     margin-bottom: 8px;
@@ -102,6 +98,10 @@
     background-color: var(--cardBackgroundColor);
   }
 
+  .filterRowCollapsed {
+    display: none !important;
+  }
+
   .filterContainer {
     margin-right: 0;
     margin-bottom: 8px;

frontend/src/Indexer/Add/AddIndexerModalContent.tsx

@@ -27,7 +27,6 @@ import {
 } from 'Store/Actions/indexerActions';
 import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import { SortCallback } from 'typings/callbacks';
 import sortByProp from 'Utilities/Array/sortByProp';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
@@ -114,8 +113,7 @@ function createAddIndexersSelector() {
   return createSelector(
     createClientSideCollectionSelector('indexers.schema'),
     createAllIndexersSelector(),
-    createDimensionsSelector(),
+    (indexers: IndexerAppState, allIndexers) => {
-    (indexers: IndexerAppState, allIndexers, dimensions) => {
       const { isFetching, isPopulated, error, items, sortDirection, sortKey } =
         indexers;
 
@@ -134,7 +132,6 @@ function createAddIndexersSelector() {
         indexers: indexerList,
         sortKey,
         sortDirection,
-        isSmallScreen: dimensions.isSmallScreen,
       };
     }
   );
@@ -148,15 +145,8 @@ interface AddIndexerModalContentProps {
 function AddIndexerModalContent(props: AddIndexerModalContentProps) {
   const { onSelectIndexer, onModalClose } = props;
 
-  const {
+  const { isFetching, isPopulated, error, indexers, sortKey, sortDirection } =
-    isFetching,
+    useSelector(createAddIndexersSelector());
-    isPopulated,
-    error,
-    indexers,
-    sortKey,
-    sortDirection,
-    isSmallScreen,
-  } = useSelector(createAddIndexersSelector());
   const dispatch = useDispatch();
 
   const [filter, setFilter] = useState('');
@@ -164,7 +154,7 @@ function AddIndexerModalContent(props: AddIndexerModalContentProps) {
   const [filterLanguages, setFilterLanguages] = useState<string[]>([]);
   const [filterPrivacyLevels, setFilterPrivacyLevels] = useState<string[]>([]);
   const [filterCategories, setFilterCategories] = useState<number[]>([]);
-  const [isFiltersCollapsed, setIsFiltersCollapsed] = useState(isSmallScreen);
+  const [isFiltersCollapsed, setIsFiltersCollapsed] = useState(true);
 
   useEffect(
     () => {