Frontend: Prevent horizontal scroll on search suggestions

AgustinSRG · Sep 15, 2024 · 609308a · 609308a
1 parent df3caa0
commit 609308a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/frontend/src/components/layout/TopBar.vue b/frontend/src/components/layout/TopBar.vue
@@ -46,7 +46,13 @@
                         :class="{ hidden: suggestions.length === 0 }"
                         @scroll.passive="onSuggestionsScroll"
                     >
-                        <div v-for="s in suggestions" :key="s.key" class="top-bar-search-suggestion" @click="clickSearch(s)">
+                        <div
+                            v-for="s in suggestions"
+                            :key="s.key"
+                            class="top-bar-search-suggestion"
+                            @click="clickSearch(s)"
+                            :title="s.name"
+                        >
                             <i class="fas fa-tag" v-if="s.type === 'tag'"></i>
                             <i class="fas fa-list-ol" v-else-if="s.type === 'album'"></i>
                             <span>{{ s.name }}</span>

diff --git a/frontend/src/style/layout/top-bar.css b/frontend/src/style/layout/top-bar.css
@@ -191,6 +191,7 @@
     flex-direction: column;
     max-height: 300px;
     overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .top-bar-search-suggestions {
@@ -219,6 +220,17 @@
     font-size: 16px;
     cursor: pointer;
     text-align: left;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.top-bar-search-suggestion span {
+    flex: 1;
+    min-width: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .top-bar-search-suggestion:hover {