fix view-icon grid

frontend/src/components/Filterbar.tsx

@@ -110,10 +110,8 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
             onClick={() => setShowSelection(!showSelection)}
             title={showSelection ? 'Hide multi select boxes' : 'Show multi select boxes'}
           />
-        </div>
-        <div className="view-icons">
           {showFilterItems && (
-            <>
+            <div>
               <span>Filter:</span>
               <select
                 value={userConfig.hide_watched === null ? '' : userConfig.hide_watched.toString()}
@@ -148,15 +146,13 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
                 value={filterHeight}
                 onChange={e => setFilterHeight(e.target.value)}
               />
-            </>
+            </div>
           )}
           <img
             src={iconFilter}
             alt="icon filter"
             onClick={() => setShowFilterItems(!showFilterItems)}
           />
-        </div>
-        <div className="view-icons">
           {showHidden && (
             <div className="sort">
               <span>Sort:</span>
@@ -204,8 +200,6 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
               id="animate-icon"
             />
           )}
-        </div>
-        <div className="view-icons">
           {userConfig.grid_items !== undefined && isGridView && (
             <div className="grid-count">
               {userConfig.grid_items < 7 && (

frontend/src/style.css

@@ -428,9 +428,8 @@ button:disabled:hover {
 }
 
 .view-controls {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: 1fr auto auto;
-  justify-content: end;
   border-bottom: 2px solid;
   border-color: var(--accent-font-dark);
   margin: 15px 0;