UI/UX update podcast search region dropdown max width and height

advplyr · Apr 24, 2024 · e8bb928 · e8bb928
1 parent 7edc7ce
commit e8bb928
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/client/components/modals/libraries/LibrarySettings.vue b/client/components/modals/libraries/LibrarySettings.vue
@@ -61,7 +61,7 @@
       </div>
     </div>
     <div v-if="isPodcastLibrary" class="py-3">
-      <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-52" @input="formUpdated" />
+      <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
     </div>
   </div>
 </template>

diff --git a/client/components/ui/Dropdown.vue b/client/components/ui/Dropdown.vue
@@ -13,7 +13,7 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox" :style="{ maxHeight: menuMaxHeight }">
         <template v-for="item in itemsToShow">
           <li :key="item.value" class="text-gray-100 relative py-2 cursor-pointer hover:bg-black-400" :id="'listbox-option-' + item.value" role="option" tabindex="0" @keyup.enter="clickedOption(item.value)" @click="clickedOption(item.value)">
             <div class="flex items-center">
@@ -41,7 +41,11 @@ export default {
       default: () => []
     },
     disabled: Boolean,
-    small: Boolean
+    small: Boolean,
+    menuMaxHeight: {
+      type: String,
+      default: '224px'
+    }
   },
   data() {
     return {