From a0a967aacdef994b35074dd40c83be4e103ec529 Mon Sep 17 00:00:00 2001
From: ctrlcat0x <developer.sahilrana@gmail.com>
Date: Wed, 22 Oct 2025 18:28:24 +0530
Subject: [PATCH] style: update compact view styles for game cards; adjust grid
 layout and add button order

---
 .../src/pages/library/library-game-card.scss      |  7 +++++++
 src/renderer/src/pages/library/library.scss       | 15 +++++++++------
 src/renderer/src/pages/library/library.tsx        |  2 +-
 src/renderer/src/pages/library/view-options.tsx   | 14 +++++++-------
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/pages/library/library-game-card.scss b/src/renderer/src/pages/library/library-game-card.scss
index b763ae2c..d6bf8c6d 100644
--- a/src/renderer/src/pages/library/library-game-card.scss
+++ b/src/renderer/src/pages/library/library-game-card.scss
@@ -280,3 +280,10 @@
     opacity: 0.5;
   }
 }
+
+/* Force fixed size for compact grid cells so cards render at 220x320 */
+.library__games-grid--compact .library-game-card__wrapper {
+  width: 215px;
+  height: 320px;
+  aspect-ratio: unset;
+}
diff --git a/src/renderer/src/pages/library/library.scss b/src/renderer/src/pages/library/library.scss
index 1e8038d9..9b660a45 100644
--- a/src/renderer/src/pages/library/library.scss
+++ b/src/renderer/src/pages/library/library.scss
@@ -161,26 +161,29 @@
 
     // Compact view - smaller cards
     &--compact {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(auto-fill, 215px);
+      grid-auto-rows: 320px;
+      justify-content: start;
 
       @container #{globals.$app-container} (min-width: 900px) {
-        grid-template-columns: repeat(5, 1fr);
+        grid-template-columns: repeat(auto-fill, 215px);
       }
 
       @container #{globals.$app-container} (min-width: 1300px) {
-        grid-template-columns: repeat(7, 1fr);
+        grid-template-columns: repeat(auto-fill, 215px);
       }
 
+      /* keep same pattern for very large screens */
       @container #{globals.$app-container} (min-width: 2000px) {
-        grid-template-columns: repeat(9, 1fr);
+        grid-template-columns: repeat(auto-fill, 215px);
       }
 
       @container #{globals.$app-container} (min-width: 2600px) {
-        grid-template-columns: repeat(12, 1fr);
+        grid-template-columns: repeat(auto-fill, 215px);
       }
 
       @container #{globals.$app-container} (min-width: 3000px) {
-        grid-template-columns: repeat(16, 1fr);
+        grid-template-columns: repeat(auto-fill, 210px);
       }
     }
   }
diff --git a/src/renderer/src/pages/library/library.tsx b/src/renderer/src/pages/library/library.tsx
index 748aba4f..2d58bb08 100644
--- a/src/renderer/src/pages/library/library.tsx
+++ b/src/renderer/src/pages/library/library.tsx
@@ -14,7 +14,7 @@ import "./library.scss";
 export default function Library() {
   const { library, updateLibrary } = useLibrary();
 
-  const [viewMode, setViewMode] = useState<ViewMode>("grid");
+  const [viewMode, setViewMode] = useState<ViewMode>("compact");
   const [filterBy, setFilterBy] = useState<FilterOption>("all");
   const [searchQuery, setSearchQuery] = useState<string>("");
   const dispatch = useAppDispatch();
diff --git a/src/renderer/src/pages/library/view-options.tsx b/src/renderer/src/pages/library/view-options.tsx
index 788eefa9..662bab65 100644
--- a/src/renderer/src/pages/library/view-options.tsx
+++ b/src/renderer/src/pages/library/view-options.tsx
@@ -15,13 +15,6 @@ export function ViewOptions({ viewMode, onViewModeChange }: ViewOptionsProps) {
   return (
     <div className="library-view-options__container">
       <div className="library-view-options__options">
-        <button
-          className={`library-view-options__option ${viewMode === "grid" ? "active" : ""}`}
-          onClick={() => onViewModeChange("grid")}
-          title={t("grid_view")}
-        >
-          <AppsIcon size={16} />
-        </button>
         <button
           className={`library-view-options__option ${viewMode === "compact" ? "active" : ""}`}
           onClick={() => onViewModeChange("compact")}
@@ -29,6 +22,13 @@ export function ViewOptions({ viewMode, onViewModeChange }: ViewOptionsProps) {
         >
           <SquareIcon size={16} />
         </button>
+        <button
+          className={`library-view-options__option ${viewMode === "grid" ? "active" : ""}`}
+          onClick={() => onViewModeChange("grid")}
+          title={t("grid_view")}
+        >
+          <AppsIcon size={16} />
+        </button>
         <button
           className={`library-view-options__option ${viewMode === "large" ? "active" : ""}`}
           onClick={() => onViewModeChange("large")}