Fix:Home page always showing horizontal scrollbar

client/assets/app.css

@@ -30,8 +30,7 @@
 }
 
 .bookshelf-row {
-  /* Sidebar width + scrollbar width */
-  width: calc(100vw - 88px);
+  width: calc(100vw - (100vw - 100%));
 }
 
 @media (max-width: 768px) {

client/components/widgets/AuthorsSlider.vue

@@ -10,10 +10,10 @@
         <span class="material-icons text-2xl">chevron_right</span>
       </button>
     </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex" :style="{ height: height + 'px' }">
+    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+      <div class="flex space-x-4" :style="{ height: height + 'px' }">
         <template v-for="(item, index) in items">
-          <cards-author-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :author="item" :height="cardHeight" :width="cardWidth" class="relative mx-2" @edit="editAuthor" @hook:updated="setScrollVars" />
+          <cards-author-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :author="item" :height="cardHeight" :width="cardWidth" class="relative" @edit="editAuthor" @hook:updated="setScrollVars" />
         </template>
       </div>
     </div>

client/components/widgets/EpisodeSlider.vue

@@ -10,8 +10,8 @@
         <span class="material-icons text-2xl">chevron_right</span>
       </button>
     </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex" :style="{ height: height + 'px' }">
+    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+      <div class="flex space-x-4" :style="{ height: height + 'px' }">
         <template v-for="(item, index) in items">
           <cards-lazy-book-card
             :key="item.recentEpisode.id"
@@ -23,7 +23,7 @@
             :book-cover-aspect-ratio="bookCoverAspectRatio"
             :bookshelf-view="bookshelfView"
             :continue-listening-shelf="continueListeningShelf"
-            class="relative mx-2"
+            class="relative"
             @edit="editEpisode"
             @editPodcast="editPodcast"
             @select="selectItem"

client/components/widgets/ItemSlider.vue

@@ -10,8 +10,8 @@
         <span class="material-icons text-2xl">chevron_right</span>
       </button>
     </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex" :style="{ height: height + 'px' }">
+    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+      <div class="flex space-x-4" :style="{ height: height + 'px' }">
         <template v-for="(item, index) in items">
           <cards-lazy-book-card
             :key="item.id + '-' + shelfId + '-' + index"
@@ -23,7 +23,7 @@
             :book-cover-aspect-ratio="bookCoverAspectRatio"
             :bookshelf-view="bookshelfView"
             :continue-listening-shelf="continueListeningShelf"
-            class="relative mx-2"
+            class="relative"
             @edit="editItem"
             @select="selectItem"
             @hook:updated="setScrollVars"

client/components/widgets/NarratorsSlider.vue

@@ -10,10 +10,10 @@
         <span class="material-icons text-2xl">chevron_right</span>
       </button>
     </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex" :style="{ height: height + 'px' }">
+    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+      <div class="flex space-x-4" :style="{ height: height + 'px' }">
         <template v-for="item in items">
-          <cards-narrator-card :key="item.name" :ref="`slider-item-${item.name}`" :narrator="item" :height="cardHeight" :width="cardWidth" class="relative mx-2" @hook:updated="setScrollVars" />
+          <cards-narrator-card :key="item.name" :ref="`slider-item-${item.name}`" :narrator="item" :height="cardHeight" :width="cardWidth" class="relative" @hook:updated="setScrollVars" />
         </template>
       </div>
     </div>

client/components/widgets/SeriesSlider.vue

@@ -10,10 +10,10 @@
         <span class="material-icons text-2xl">chevron_right</span>
       </button>
     </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex" :style="{ height: height + 'px' }">
+    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+      <div class="flex space-x-4" :style="{ height: height + 'px' }">
         <template v-for="(item, index) in items">
-          <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative mx-2" @hook:updated="setScrollVars" />
+          <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative" @hook:updated="setScrollVars" />
         </template>
       </div>
     </div>