Fix text overflow issue with long search history entries

kommunarr · Dec 29, 2024 · ea73ad1 · ea73ad1
1 parent 15aec12
commit ea73ad1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
@@ -203,7 +203,8 @@ body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inp
 }
 
 .list li {
-  display: block;
+  display: flex;
+  justify-content: space-between;
   padding-block: 0;
   line-height: 2rem;
   padding-inline: 15px;

diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
@@ -84,12 +84,14 @@
           @mouseenter="searchState.selectedOption = index"
           @mouseleave="searchState.selectedOption = -1; removeButtonSelectedIndex = -1"
         >
-          <font-awesome-icon
-            v-if="dataListProperties[index]?.iconName"
-            :icon="['fas', dataListProperties[index].iconName]"
-            class="searchResultIcon"
-          />
-          <span>{{ entry }}</span>
+          <div>
+            <font-awesome-icon
+              v-if="dataListProperties[index]?.iconName"
+              :icon="['fas', dataListProperties[index].iconName]"
+              class="searchResultIcon"
+            />
+            <span>{{ entry }}</span>
+          </div>
           <a
             v-if="dataListProperties[index]?.isRemoveable"
             class="removeButton"