configurable card width

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>

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',
     ],
   },
 })