From 721f812df09059f9fa7b2348bfa6701735243db8 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 13 Jul 2022 17:10:47 -0500
Subject: [PATCH] Update:Library widget UI

---
 components/app/Appbar.vue | 4 ++--
 layouts/default.vue       | 3 ++-
 tailwind.config.js        | 3 +++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/app/Appbar.vue b/components/app/Appbar.vue
index c4628437..a2e9a8bd 100644
--- a/components/app/Appbar.vue
+++ b/components/app/Appbar.vue
@@ -8,9 +8,9 @@
         <span class="material-icons text-3xl text-white">arrow_back</span>
       </a>
       <div v-if="user && currentLibrary">
-        <div class="pl-3 pr-4 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
+        <div class="pl-1.5 pr-2.5 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
           <widgets-library-icon :icon="currentLibraryIcon" :size="4" />
-          <p class="text-base font-book leading-4 ml-2 mt-0.5">{{ currentLibraryName }}</p>
+          <p class="text-sm font-book leading-4 ml-2 mt-0.5 max-w-24 truncate">{{ currentLibraryName }}</p>
         </div>
       </div>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 1b808df2..68a10886 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -213,8 +213,9 @@ export default {
           mediaProgress: prog
         }
         newLocalMediaProgress = await this.$db.syncServerMediaProgressWithLocalMediaProgress(payload)
-      } else {
+      } else if (!localProg) {
         // Check if local library item exists
+        //   local media progress may not exist yet if it hasn't been played
         var localLibraryItem = await this.$db.getLocalLibraryItemByLId(prog.libraryItemId)
         if (localLibraryItem) {
           if (prog.episodeId) {
diff --git a/tailwind.config.js b/tailwind.config.js
index 368e3bfd..a0011750 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,6 +36,9 @@ module.exports = {
       },
       fontSize: {
         xxs: '0.625rem'
+      },
+      maxWidth: {
+        '24': '6rem'
       }
     }
   },