From 89fa902590bdc55d19ed2234deec7f819ef564d4 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 21 Jan 2026 13:44:56 +0800
Subject: [PATCH] configurable card width

---
 next-ui/src/pages/libraries/[id]/series.vue | 20 ++++++++++++++++----
 next-ui/src/stores/app.ts                   |  2 ++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/next-ui/src/pages/libraries/[id]/series.vue b/next-ui/src/pages/libraries/[id]/series.vue
index 84e2eb36..807678da 100644
--- a/next-ui/src/pages/libraries/[id]/series.vue
+++ b/next-ui/src/pages/libraries/[id]/series.vue
@@ -2,16 +2,27 @@
   <v-app-bar>
     <v-spacer />
 
-    <PageSizeSelector
-      v-model="appStore.browsingPageSize"
-      allow-unpaged
-      :sizes="[1, 10, 20]"
+    <v-slider
+      v-if="presentationMode === 'grid'"
+      v-model="appStore.gridCardWidth"
+      :min="130"
+      :max="200"
+      color="surface-darken"
+      hide-details
+      thumb-size="15"
+      max-width="80"
     />
 
     <PresentationSelector
       v-model="presentationMode"
       :modes="['grid', 'list']"
     />
+
+    <PageSizeSelector
+      v-model="appStore.browsingPageSize"
+      allow-unpaged
+      :sizes="[1, 10, 20]"
+    />
   </v-app-bar>
 
   <template v-if="series">
@@ -39,6 +50,7 @@
                 :series="item.raw"
                 :selected="isSelected(item)"
                 :pre-select="preSelect"
+                :width="appStore.gridCardWidth"
                 @selection="toggleSelect(item)"
               />
             </v-col>
diff --git a/next-ui/src/stores/app.ts b/next-ui/src/stores/app.ts
index 6f2c8af0..bf088d31 100644
--- a/next-ui/src/stores/app.ts
+++ b/next-ui/src/stores/app.ts
@@ -17,6 +17,7 @@ export const useAppStore = defineStore('app', {
      * Use the getter to ensure a default value is always set.
      */
     presentationMode: {} as Record<string, PresentationMode>,
+    gridCardWidth: 150,
     // transient
     reorderLibraries: false,
   }),
@@ -40,6 +41,7 @@ export const useAppStore = defineStore('app', {
       'importBooksPath',
       'browsingPageSize',
       'presentationMode',
+      'gridCardWidth',
     ],
   },
 })