fix(dashboard): add scroll bar to tags dropdown (#6887)

Co-authored-by: Frank Elsinga <frank@elsinga.de>

src/components/MonitorListFilter.vue

@@ -117,22 +117,28 @@
             </span>
         </template>
         <template #dropdown>
-            <li v-for="tag in tagsList" :key="tag.id">
-                <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
-                    <div class="d-flex align-items-center justify-content-between">
-                        <span><Tag :item="tag" :size="'sm'" /></span>
-                        <span class="ps-3">
-                            {{ getTaggedMonitorCount(tag) }}
-                            <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
-                                <font-awesome-icon icon="check" />
-                            </span>
-                        </span>
-                    </div>
-                </div>
-            </li>
-            <li v-if="tagsList.length === 0">
-                <div class="dropdown-item disabled px-3">
-                    {{ $t("No tags found.") }}
+            <li class="list-unstyled m-0 p-0">
+                <div class="tags-dropdown-scroll">
+                    <ul class="list-unstyled m-0 p-0">
+                        <li v-for="tag in tagsList" :key="tag.id">
+                            <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
+                                <div class="d-flex align-items-center justify-content-between">
+                                    <span><Tag :item="tag" :size="'sm'" /></span>
+                                    <span class="ps-3">
+                                        {{ getTaggedMonitorCount(tag) }}
+                                        <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
+                                            <font-awesome-icon icon="check" />
+                                        </span>
+                                    </span>
+                                </div>
+                            </div>
+                        </li>
+                        <li v-if="tagsList.length === 0">
+                            <div class="dropdown-item disabled px-3">
+                                {{ $t("No tags found.") }}
+                            </div>
+                        </li>
+                    </ul>
                 </div>
             </li>
         </template>
@@ -343,4 +349,9 @@ export default {
 .btn-collapse-all {
     transition: none !important;
 }
+
+.tags-dropdown-scroll {
+    max-height: min(50vh, 320px);
+    overflow-y: auto;
+}
 </style>