! Fix clear text button style

src/renderer/components/ft-input/ft-input.css

@@ -51,15 +51,23 @@
   inset-inline-start: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
+
   margin-block: 0;
   margin-inline: 3px;
   padding: 10px;
   border-radius: 100%;
+
   color: var(--primary-text-color);
   opacity: 0;
+
   transition: background 0.2s ease-in;
 }
 
+.clearInputTextButton.verticallyCentered {
+  inset-block: 0;
+  margin-block: auto;
+}
+
 .clearInputTextButton.visible:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);

src/renderer/components/ft-input/ft-input.js

@@ -38,6 +38,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    clearInputTextButtonVerticallyCentered: {
+      type: Boolean,
+      default: false
+    },
     showLabel: {
       type: Boolean,
       default: false
@@ -61,7 +65,7 @@ export default defineComponent({
     tooltip: {
       type: String,
       default: ''
-    }
+    },
   },
   data: function () {
     let actionIcon = ['fas', 'search']

src/renderer/components/ft-input/ft-input.vue

@@ -29,7 +29,8 @@
       :icon="['fas', 'times-circle']"
       class="clearInputTextButton"
       :class="{
-        visible: inputDataPresent
+        visible: inputDataPresent,
+        verticallyCentered: clearInputTextButtonVerticallyCentered,
       }"
       tabindex="0"
       role="button"

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -24,6 +24,7 @@
           ref="searchBar"
           :placeholder="$t('User Playlists.Search bar placeholder')"
           :show-clear-text-button="true"
+          :clear-input-text-button-vertically-centered="true"
           :show-action-button="false"
           @input="(input) => query = input"
           @clear="query = ''"