From ea2e8c7cc9b9c4a7bdef8db38929083f2bef1376 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 11 Apr 2025 17:46:19 -0500
Subject: [PATCH] Update bookshelf item width to more accurately fill shelf for
 smaller screens #1540

---
 components/bookshelf/LazyBookshelf.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/bookshelf/LazyBookshelf.vue b/components/bookshelf/LazyBookshelf.vue
index adfdbb2c..df6782db 100644
--- a/components/bookshelf/LazyBookshelf.vue
+++ b/components/bookshelf/LazyBookshelf.vue
@@ -105,8 +105,18 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     bookWidth() {
-      var coverSize = 100
-      if (window.innerWidth <= 375) coverSize = 90
+      const availableWidth = window.innerWidth - 16
+      let coverSize = 100
+
+      // Smaller screens fill width with 2 items per row
+      if (availableWidth <= 400) {
+        coverSize = Math.floor(availableWidth / 2 - 24)
+        if (coverSize < 120) {
+          // Fallback to 1 item per row
+          coverSize = Math.min(availableWidth - 24, 200)
+        }
+        if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') coverSize /= 1.6
+      }
 
       if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return coverSize * 1.6
       return coverSize