From 3b4ac3a230ee2a24a9d25f5943d9167c8a59cb68 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 26 Jul 2022 18:54:32 -0500
Subject: [PATCH] Fix:Long library names overflow #858

---
 client/components/app/Appbar.vue            |  4 ++--
 client/components/controls/GlobalSearch.vue |  2 +-
 client/components/ui/LibrariesDropdown.vue  | 18 +++++++++---------
 client/components/widgets/LibraryIcon.vue   |  2 +-
 client/tailwind.config.js                   |  6 +++++-
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue
index cfc1c994..864cd11d 100644
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -3,14 +3,14 @@
     <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
       <div class="flex h-full items-center">
         <nuxt-link to="/">
-          <img src="/icon48.png" class="w-8 h-8 mr-8 sm:w-12 sm:h-12 sm:mr-4" />
+          <img src="/icon48.png" class="w-10 min-w-10 h-10 mr-2 sm:w-12 sm:min-w-12 sm:h-12 sm:mr-4" />
         </nuxt-link>
 
         <nuxt-link to="/">
           <h1 class="text-2xl font-book mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
         </nuxt-link>
 
-        <ui-libraries-dropdown />
+        <ui-libraries-dropdown class="mr-2" />
 
         <controls-global-search v-if="currentLibrary" class="" />
         <div class="flex-grow" />
diff --git a/client/components/controls/GlobalSearch.vue b/client/components/controls/GlobalSearch.vue
index f9a0b40b..09590299 100644
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sm:w-80 w-full sm:ml-6 relative">
+  <div class="sm:w-80 w-full relative">
     <form @submit.prevent="submitSearch">
       <ui-text-input ref="input" v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
     </form>
diff --git a/client/components/ui/LibrariesDropdown.vue b/client/components/ui/LibrariesDropdown.vue
index c9c2065c..3f8e35a7 100644
--- a/client/components/ui/LibrariesDropdown.vue
+++ b/client/components/ui/LibrariesDropdown.vue
@@ -1,18 +1,18 @@
 <template>
-  <div v-if="currentLibrary" class="relative sm:w-36 h-8 px-1.5" v-click-outside="clickOutsideObj">
-    <button type="button" :disabled="disabled" class="w-10 sm:w-36 relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
-      <span class="flex items-center justify-center sm:justify-start">
-        <widgets-library-icon :icon="currentLibraryIcon" class="sm:mr-2" />
-        <span class="hidden sm:block">{{ currentLibrary.name }}</span>
-      </span>
+  <div v-if="currentLibrary" class="relative h-8 max-w-52" v-click-outside="clickOutsideObj">
+    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+      <div class="flex items-center justify-center sm:justify-start">
+        <widgets-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
+        <span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
+      </div>
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-36 bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
         <template v-for="library in librariesFiltered">
           <li :key="library.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="selectLibrary(library)">
-            <div class="flex items-center px-3">
-              <widgets-library-icon :icon="library.icon" class="mr-2" />
+            <div class="flex items-center px-2">
+              <widgets-library-icon :icon="library.icon" class="mr-1.5 text-gray-400" />
               <span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>
             </div>
           </li>
diff --git a/client/components/widgets/LibraryIcon.vue b/client/components/widgets/LibraryIcon.vue
index 7d8d50ff..41248470 100644
--- a/client/components/widgets/LibraryIcon.vue
+++ b/client/components/widgets/LibraryIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="`h-${size} w-${size}`">
+  <div :class="`h-${size} w-${size} min-w-${size}`">
     <component :is="iconComponentName" />
   </div>
 </template>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index a4d9dd8c..1509f715 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -14,7 +14,8 @@ module.exports = {
       'text-green-500',
       'py-1.5',
       'bg-info',
-      'px-1.5'
+      'px-1.5',
+      'min-w-5'
     ],
   },
   theme: {
@@ -36,11 +37,14 @@ module.exports = {
         '32': '8rem',
         '40': '10rem',
         '48': '12rem',
+        '52': '13rem',
         '64': '16rem',
         '80': '20rem'
       },
       minWidth: {
+        '5': '1.25rem',
         '6': '1.5rem',
+        '10': '2.5rem',
         '12': '3rem',
         '16': '4rem',
         '20': '5rem',