From 635f22ddfe7a2457eef052717316275329065bea Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Sun, 23 Jun 2024 19:15:39 +0300
Subject: [PATCH] Reverted default spacing and font-sizing changes, and
 extended spaing with em-based variants

---
 .../components/app/BookShelfCategorized.vue   |   6 +-
 client/components/app/BookShelfRow.vue        |  22 +--
 client/components/app/LazyBookshelf.vue       |   6 +-
 client/components/cards/AuthorCard.vue        |  14 +-
 client/components/cards/GroupCard.vue         |   2 +-
 client/components/cards/LazyAlbumCard.vue     |   4 +-
 client/components/cards/LazyBookCard.vue      |   8 +-
 .../components/cards/LazyCollectionCard.vue   |   6 +-
 client/components/cards/LazyPlaylistCard.vue  |   6 +-
 client/components/cards/LazySeriesCard.vue    |   6 +-
 client/components/cards/NarratorCard.vue      |   2 +-
 client/components/widgets/CoverSizeWidget.vue |   4 +-
 client/components/widgets/ItemSlider.vue      |  12 +-
 .../tests/components/cards/LazyBookCard.cy.js |   1 +
 .../pages/library/_library/authors/index.vue  |   9 +-
 client/tailwind.config.js                     | 184 ++++++------------
 16 files changed, 121 insertions(+), 171 deletions(-)

diff --git a/client/components/app/BookShelfCategorized.vue b/client/components/app/BookShelfCategorized.vue
index eee5d0fb..1d7bb2f7 100644
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative" :style="{ fontSize: sizeMultiplier + 'rem' }">
     <!-- Cover size widget -->
-    <widgets-cover-size-widget class="fixed right-4r z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
 
     <div v-if="loaded && !shelves.length && !search" class="w-full flex flex-col items-center justify-center py-12">
       <p class="text-center text-2xl mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
@@ -14,9 +14,9 @@
       <p class="text-center text-xl py-4">No results for query</p>
     </div>
     <!-- Alternate plain view -->
-    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
+    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
       <template v-for="(shelf, index) in supportedShelves">
-        <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
+        <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)">
           <p class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-item-slider>
       </template>
diff --git a/client/components/app/BookShelfRow.vue b/client/components/app/BookShelfRow.vue
index 39ba7261..6892434d 100644
--- a/client/components/app/BookShelfRow.vue
+++ b/client/components/app/BookShelfRow.vue
@@ -1,53 +1,53 @@
 <template>
   <div class="relative">
     <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll no-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft + 'em' }" @scroll="scrolled">
-      <div class="w-full h-full pt-6">
+      <div class="w-full h-full pt-6e">
         <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
           <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
+            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
           </template>
         </div>
         <div v-if="shelf.type === 'episode'" class="flex items-center">
           <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.recentEpisode.id" :ref="`shelf-episode-${entity.recentEpisode.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @editPodcast="editItem" @edit="editEpisode" />
+            <cards-lazy-book-card :key="entity.recentEpisode.id" :ref="`shelf-episode-${entity.recentEpisode.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @editPodcast="editItem" @edit="editEpisode" />
           </template>
         </div>
         <div v-if="shelf.type === 'series'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-lazy-series-card :key="entity.name" :series-mount="entity" class="relative mx-2" @hook:updated="updatedBookCard" />
+            <cards-lazy-series-card :key="entity.name" :series-mount="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
           </template>
         </div>
         <div v-if="shelf.type === 'tags'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-group-card :key="entity.name" :group="entity" class="relative mx-2" @hook:updated="updatedBookCard" />
+            <cards-group-card :key="entity.name" :group="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
           </template>
         </div>
         <div v-if="shelf.type === 'authors'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-author-card :key="entity.id" :author="entity" @hook:updated="updatedBookCard" class="mx-2" @edit="editAuthor" />
+            <cards-author-card :key="entity.id" :author="entity" @hook:updated="updatedBookCard" class="mx-2e" @edit="editAuthor" />
           </template>
         </div>
         <div v-if="shelf.type === 'narrators'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-narrator-card :key="entity.name" :narrator="entity" @hook:updated="updatedBookCard" class="mx-2" />
+            <cards-narrator-card :key="entity.name" :narrator="entity" @hook:updated="updatedBookCard" class="mx-2e" />
           </template>
         </div>
       </div>
     </div>
     <div class="relative">
-      <div class="relative text-center categoryPlacard transform z-30 top-0 left-4 md:left-8 w-44 rounded-md">
+      <div class="relative text-center categoryPlacard transform z-30 top-0 left-4e md:left-8e w-44e rounded-md">
         <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
           <p :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</p>
         </div>
       </div>
 
-      <div class="bookshelfDividerCategorized h-6 w-full absolute top-0 left-0 right-0 z-20"></div>
+      <div class="bookshelfDividerCategorized h-6e w-full absolute top-0 left-0 right-0 z-20"></div>
     </div>
     <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollLeft">
-      <span class="material-icons text-6xl text-white">chevron_left</span>
+      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_left</span>
     </div>
     <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollRight">
-      <span class="material-icons text-6xl text-white">chevron_right</span>
+      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
     </div>
   </div>
 </template>
diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index 54ab77d4..022ea3df 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="bookshelf" ref="bookshelf" class="w-full overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
     <template v-for="shelf in totalShelves">
-      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
-        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6" />
+      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4e sm:px-8e relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
       </div>
     </template>
 
@@ -21,7 +21,7 @@
       </div>
     </div>
 
-    <widgets-cover-size-widget class="fixed right-4r z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
   </div>
 </template>
 
diff --git a/client/components/cards/AuthorCard.vue b/client/components/cards/AuthorCard.vue
index dc635acf..7bbbb830 100644
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ width: cardWidth + 'px' }">
+  <div :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
     <nuxt-link :to="`/author/${author.id}`">
       <div cy-id="card" @mouseover="mouseover" @mouseleave="mouseleave">
         <div cy-id="imageArea" :style="{ height: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
@@ -7,20 +7,20 @@
           <covers-author-image :author="author" />
 
           <!-- Author name & num books overlay -->
-          <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
+          <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
             <p class="text-center font-semibold truncate" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
             <p class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
           </div>
 
           <!-- Search icon btn -->
-          <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
+          <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
             <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
-              <span class="material-icons text-lg">search</span>
+              <span class="material-icons" :style="{ fontSize: 1.125 + 'em' }">search</span>
             </ui-tooltip>
           </div>
-          <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
+          <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
             <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
-              <span class="material-icons text-lg">edit</span>
+              <span class="material-icons" :style="{ fontSize: 1.125 + 'em' }">edit</span>
             </ui-tooltip>
           </div>
 
@@ -29,7 +29,7 @@
             <widgets-loading-spinner size="" />
           </div>
         </div>
-        <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1 px-2">
+        <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1e px-2e">
           <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
         </div>
       </div>
diff --git a/client/components/cards/GroupCard.vue b/client/components/cards/GroupCard.vue
index 301a79ee..db1ce757 100644
--- a/client/components/cards/GroupCard.vue
+++ b/client/components/cards/GroupCard.vue
@@ -9,7 +9,7 @@
             <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
           </div>
 
-          <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
+          <div class="absolute z-10 top-1.5e right-1.5e rounded-md leading-3e p-1e font-semibold text-white flex items-center justify-center" :style="{ fontSize: 0.8 + 'em' }" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
         </div>
       </nuxt-link>
     </div>
diff --git a/client/components/cards/LazyAlbumCard.vue b/client/components/cards/LazyAlbumCard.vue
index d943e447..86587992 100644
--- a/client/components/cards/LazyAlbumCard.vue
+++ b/client/components/cards/LazyAlbumCard.vue
@@ -8,12 +8,12 @@
     </div>
 
     <div class="relative w-full">
-      <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+      <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
         <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
           <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
         </div>
       </div>
-      <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
+      <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8e h-8e py-1e rounded-md text-center">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
         <p class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ artist || '&nbsp;' }}</p>
       </div>
diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index 5103da74..115a0631 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -39,7 +39,7 @@
         </div>
 
         <!-- No progress shown for podcasts (unless showing podcast episode) -->
-        <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * userProgressPercent + 'px' }"></div>
+        <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * userProgressPercent + 'px' }"></div>
 
         <!-- Overlay is not shown if collapsing series in library -->
         <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
@@ -85,9 +85,9 @@
         </div>
 
         <!-- Error widget -->
-        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4 left-0 z-10">
+        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4e left-0 z-10">
           <div :style="{ height: 1.5 + 'em', width: 2.5 + 'em' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-            <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
+            <span class="material-icons text-red-100 pr-1e" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
           </div>
         </ui-tooltip>
 
@@ -120,7 +120,7 @@
     </div>
 
     <!-- Alternative bookshelf title/author/sort -->
-    <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2 mb-2 left-0 z-50 w-full">
+    <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
       <div :style="{ fontSize: 0.9 + 'em' }">
         <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
           <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
diff --git a/client/components/cards/LazyCollectionCard.vue b/client/components/cards/LazyCollectionCard.vue
index 63700644..0eb1b7bc 100644
--- a/client/components/cards/LazyCollectionCard.vue
+++ b/client/components/cards/LazyCollectionCard.vue
@@ -7,19 +7,19 @@
       </div>
       <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
         <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
-          <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
+          <span class="material-icons text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
         </div>
       </div>
 
       <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
     </div>
 
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
       </div>
     </div>
-    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8 py-1 rounded-md text-center">
+    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
       <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
     </div>
   </div>
diff --git a/client/components/cards/LazyPlaylistCard.vue b/client/components/cards/LazyPlaylistCard.vue
index 68af1399..3e61960f 100644
--- a/client/components/cards/LazyPlaylistCard.vue
+++ b/client/components/cards/LazyPlaylistCard.vue
@@ -7,17 +7,17 @@
       </div>
       <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
         <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
-          <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
+          <span class="material-icons text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
         </div>
       </div>
     </div>
 
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 -bottom-6 left-0 right-0 mx-auto h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 -bottom-6e left-0 right-0 mx-auto h-6e rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
       </div>
     </div>
-    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8 py-1 rounded-md text-center">
+    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
       <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
     </div>
   </div>
diff --git a/client/components/cards/LazySeriesCard.vue b/client/components/cards/LazySeriesCard.vue
index f6036c44..8455dcd7 100644
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@@ -10,7 +10,7 @@
         <p :style="{ fontSize: 0.8 + 'em' }">{{ books.length }}</p>
       </div>
 
-      <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
+      <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
 
       <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: '1em' }">
         <p :style="{ fontSize: 1.2 + 'em' }">{{ displayTitle }}</p>
@@ -19,12 +19,12 @@
       <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
     </div>
 
-    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
         <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
       </div>
     </div>
-    <div cy-id="detailBottomText" v-else class="relative z-30 left-0 right-0 mx-auto py-1 rounded-md text-center">
+    <div cy-id="detailBottomText" v-else class="relative z-30 left-0 right-0 mx-auto py-1e rounded-md text-center">
       <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
       <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
     </div>
diff --git a/client/components/cards/NarratorCard.vue b/client/components/cards/NarratorCard.vue
index a18a8c25..6dc08991 100644
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@@ -7,7 +7,7 @@
         </div>
 
         <!-- Narrator name & num books overlay -->
-        <div class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
+        <div class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
           <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
           <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
         </div>
diff --git a/client/components/widgets/CoverSizeWidget.vue b/client/components/widgets/CoverSizeWidget.vue
index cddc5d1d..094282d0 100644
--- a/client/components/widgets/CoverSizeWidget.vue
+++ b/client/components/widgets/CoverSizeWidget.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="rounded-full py-1r bg-primary px-2r border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
+    <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
       <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size" role="button">remove</span>
-      <p class="px-2r font-mono" style="font-size: 1rem">{{ bookCoverWidth }}</p>
+      <p class="px-2 font-mono" style="font-size: 1rem">{{ bookCoverWidth }}</p>
       <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size" role="button">add</span>
     </div>
   </div>
diff --git a/client/components/widgets/ItemSlider.vue b/client/components/widgets/ItemSlider.vue
index 43cc088a..75a5bf20 100644
--- a/client/components/widgets/ItemSlider.vue
+++ b/client/components/widgets/ItemSlider.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="w-full">
-    <div class="flex items-center py-3">
+    <div class="flex items-center py-3e">
       <slot />
       <div class="flex-grow" />
-      <button cy-id="leftScrollButton" v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
+      <button cy-id="leftScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
+        <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">chevron_left</span>
       </button>
-      <button cy-id="rightScrollButton" v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
+      <button cy-id="rightScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
+        <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">chevron_right</span>
       </button>
     </div>
     <div cy-id="slider" 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">
+      <div class="flex space-x-4e">
         <template v-for="(item, index) in items">
           <div cy-id="item" ref="item" :key="itemKeyFunc(item)">
             <component :is="componentName" :ref="itemRefFunc(item)" :index="index" :[itemPropName]="item" :bookshelf-view="bookshelfView" :continue-listening-shelf="continueListeningShelf" class="relative" @edit="editFunc" @editPodcast="editItem" @select="selectItem" @hook:updated="setScrollVars" />
diff --git a/client/cypress/tests/components/cards/LazyBookCard.cy.js b/client/cypress/tests/components/cards/LazyBookCard.cy.js
index 7e0e3d67..52a1f00b 100644
--- a/client/cypress/tests/components/cards/LazyBookCard.cy.js
+++ b/client/cypress/tests/components/cards/LazyBookCard.cy.js
@@ -44,6 +44,7 @@ function createMountOptions() {
         'user/getUserCanDownload': true,
         'user/getIsAdminOrUp': true,
         'user/getUserMediaProgress': (id) => null,
+        'user/getUserSetting': (settingName) => false,
         'user/getSizeMultiplier': 1,
         'libraries/getLibraryProvider': () => 'audible.us',
         'libraries/getBookCoverAspectRatio': 1,
diff --git a/client/pages/library/_library/authors/index.vue b/client/pages/library/_library/authors/index.vue
index 92696e35..a98a06c9 100644
--- a/client/pages/library/_library/authors/index.vue
+++ b/client/pages/library/_library/authors/index.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
     <app-book-shelf-toolbar page="authors" is-home :authors="authors" />
-    <div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
+    <div id="bookshelf" class="w-full h-full p-8e overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
+      <!-- Cover size widget -->
+      <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
       <div class="flex flex-wrap justify-center">
         <template v-for="author in authorsSorted">
-          <cards-author-card :key="author.id" :author="author" class="p-3" @edit="editAuthor" />
+          <cards-author-card :key="author.id" :author="author" class="p-3e" @edit="editAuthor" />
         </template>
       </div>
     </div>
@@ -36,6 +38,9 @@ export default {
     }
   },
   computed: {
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
+    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 85a18045..7f234cea 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,83 +1,81 @@
-/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['components/**/*.vue', 'layouts/**/*.vue', 'pages/**/*.vue', 'templates/**/*.vue', 'plugins/**/*.js', 'nuxt.config.js'],
   safelist: ['bg-red-600', 'px-1.5', 'min-w-5', 'border-warning'],
   theme: {
     extend: {
       height: {
-        7.5: '1.75em',
-        18: '4.5em',
-        45: '11.25em'
+        7.5: '1.75rem',
+        18: '4.5rem',
+        45: '11.25rem'
       },
       width: {
-        18: '4.5em'
+        18: '4.5rem'
       },
       maxWidth: {
-        6: '1.5em',
-        12: '3em',
-        16: '4em',
-        20: '5em',
-        24: '6em',
-        32: '8em',
-        40: '10em',
-        48: '12em',
-        52: '13em',
-        64: '16em',
-        80: '20em'
+        6: '1.5rem',
+        12: '3rem',
+        16: '4rem',
+        20: '5rem',
+        24: '6rem',
+        32: '8rem',
+        40: '10rem',
+        48: '12rem',
+        52: '13rem',
+        64: '16rem',
+        80: '20rem'
       },
       minWidth: {
-        5: '1.25em',
-        6: '1.5em',
-        8: '2em',
-        10: '2.5em',
-        12: '3em',
-        16: '4em',
-        20: '5em',
-        24: '6em',
-        26: '6.5em',
-        32: '8em',
-        48: '12em',
-        64: '16em',
-        80: '20em'
+        5: '1.25rem',
+        6: '1.5rem',
+        8: '2rem',
+        10: '2.5rem',
+        12: '3rem',
+        16: '4rem',
+        20: '5rem',
+        24: '6rem',
+        26: '6.5rem',
+        32: '8rem',
+        48: '12rem',
+        64: '16rem',
+        80: '20rem'
       },
       spacing: {
-        18: '4.5em',
-        '18r': '4.5rem',
-        '-54': '-13.5em',
-        '54r': '13.5rem',
-        '0.5r': '0.125rem',
-        '1r': '0.25rem',
-        '1.5r': '0.375rem',
-        '2r': '0.5rem',
-        '2.5r': '0.625rem',
-        '3r': '0.75rem',
-        '3.5r': '0.875rem',
-        '4r': '1rem',
-        '5r': '1.25rem',
-        '6r': '1.5rem',
-        '7r': '1.75rem',
-        '8r': '2rem',
-        '9r': '2.25rem',
-        '10r': '2.5rem',
-        '11r': '2.75rem',
-        '12r': '3rem',
-        '14r': '3.5rem',
-        '16r': '4rem',
-        '20r': '5rem',
-        '24r': '6rem',
-        '28r': '7rem',
-        '32r': '8rem',
-        '36r': '9rem',
-        '40r': '10rem',
-        '44r': '11rem',
-        '48r': '12rem',
-        '52r': '13rem',
-        '56r': '14rem',
-        '60r': '15rem',
-        '64r': '16rem',
-        '72r': '18rem',
-        '80r': '20rem',
-        '96r': '24rem'
+        18: '4.5rem',
+        '-54': '-13.5rem',
+        // based on tailwind default config converted to em units, see client\node_modules\tailwindcss\stubs\config.full.js
+        '0.5e': '0.125em',
+        '1e': '0.25em',
+        '1.5e': '0.375em',
+        '2e': '0.5em',
+        '2.5e': '0.625em',
+        '3e': '0.75em',
+        '3.5e': '0.875em',
+        '4e': '1em',
+        '5e': '1.25em',
+        '6e': '1.5em',
+        '7e': '1.75em',
+        '8e': '2em',
+        '9e': '2.25em',
+        '10e': '2.5em',
+        '11e': '2.75em',
+        '12e': '3em',
+        '14e': '3.5em',
+        '16e': '4em',
+        '20e': '5em',
+        '24e': '6em',
+        '28e': '7em',
+        '32e': '8em',
+        '36e': '9em',
+        '40e': '10em',
+        '44e': '11em',
+        '48e': '12em',
+        '52e': '13em',
+        '56e': '14em',
+        '60e': '15em',
+        '64e': '16em',
+        '72e': '18em',
+        '80e': '20em',
+        '96e': '24em'
       },
       rotate: {
         '-60': '-60deg'
@@ -117,60 +115,6 @@ module.exports = {
         50: 50,
         60: 60
       }
-    },
-    spacing: {
-      // based on tailwind default config converted to em units, see client\node_modules\tailwindcss\stubs\config.full.js
-      px: '1px',
-      0: '0px',
-      0.5: '0.125em',
-      1: '0.25em',
-      1.5: '0.375em',
-      2: '0.5em',
-      2.5: '0.625em',
-      3: '0.75em',
-      3.5: '0.875em',
-      4: '1em',
-      5: '1.25em',
-      6: '1.5em',
-      7: '1.75em',
-      8: '2em',
-      9: '2.25em',
-      10: '2.5em',
-      11: '2.75em',
-      12: '3em',
-      14: '3.5em',
-      16: '4em',
-      20: '5em',
-      24: '6em',
-      28: '7em',
-      32: '8em',
-      36: '9em',
-      40: '10em',
-      44: '11em',
-      48: '12em',
-      52: '13em',
-      56: '14em',
-      60: '15em',
-      64: '16em',
-      72: '18em',
-      80: '20em',
-      96: '24em'
-    },
-    fontSize: {
-      // based on tailwind default config converted to em units, see client\node_modules\tailwindcss\stubs\config.full.js
-      xs: ['0.75em', '1em'],
-      sm: ['0.875em', '1.25em'],
-      base: ['1em', '1.5em'],
-      lg: ['1.125em', '1.75em'],
-      xl: ['1.25em', '1.75em'],
-      '2xl': ['1.5em', '2em'],
-      '3xl': ['1.875em', '2.25em'],
-      '4xl': ['2.25em', '2.5em'],
-      '5xl': ['3em', '1'],
-      '6xl': ['3.75em', '1'],
-      '7xl': ['4.5em', '1'],
-      '8xl': ['6em', '1'],
-      '9xl': ['8em', '1']
     }
   },
   variants: {