From 41c9415b3f572cfa59b968e75d65b497649b7f7f Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Thu, 14 Aug 2025 16:17:53 +0700
Subject: [PATCH] fix view-icon grid

---
 frontend/src/components/Filterbar.tsx | 10 ++--------
 frontend/src/style.css                |  5 ++---
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Filterbar.tsx b/frontend/src/components/Filterbar.tsx
index 197df041..a03e5392 100644
--- a/frontend/src/components/Filterbar.tsx
+++ b/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 && (
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 3cc10ccc..55debd37 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -428,9 +428,8 @@ button:disabled:hover {
 }
 
 .view-controls {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: end;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
   border-bottom: 2px solid;
   border-color: var(--accent-font-dark);
   margin: 15px 0;