fix(SearchBar): adjust text position

components/rmrk/Gallery/Search/SearchBar.vue

@@ -81,6 +81,15 @@
             </div>
           </template>
         </b-autocomplete>
+        <div
+          v-if="searchQuery"
+          :class="{ 'ml-4': true, 'is-size-4': isVisible || !sliderDirty }">
+          <div>Showing results for {{ searchQuery }}</div>
+          <div v-if="!isVisible && sliderDirty" class="is-size-7">
+            Prices ranging from {{ this.query.priceMin / 1000000000000 }} to
+            {{ this.query.priceMax / 1000000000000 }}
+          </div>
+        </div>
       </b-field>
       <b-field
         expanded
@@ -96,9 +105,6 @@
         <slot />
       </b-field>
     </div>
-    <div v-if="searchQuery" class="mb-3">
-      <span>Showing results for {{ searchQuery }}</span>
-    </div>
     <b-collapse
       aria-id="sortAndFilter"
       animation="opacitySlide"
@@ -123,11 +129,11 @@
         ticks
         @change="sliderChange">
       </b-slider>
+      <span v-if="sliderDirty"
+        >Prices ranging from {{ this.query.priceMin / 1000000000000 }} to
+        {{ this.query.priceMax / 1000000000000 }}</span
+      >
     </b-collapse>
-    <span v-if="query.priceMin !== undefined && query.priceMax !== undefined">
-      Prices ranging from {{ this.query.priceMin / 1000000000000 }} to
-      {{ this.query.priceMax / 1000000000000 }}
-    </span>
   </div>
 </template>
 
@@ -189,6 +195,7 @@ export default class SearchBar extends mixins(
   private highlightPos = 0
   private rangeSlider = [0, 5]
   private inputDirty = false
+  private sliderDirty = false
 
   public mounted(): void {
     this.getSearchHistory()
@@ -478,6 +485,9 @@ export default class SearchBar extends mixins(
 
   @Debounce(50)
   private sliderChange([min, max]: [number, number]): void {
+    if (!this.sliderDirty) {
+      this.sliderDirty = true
+    }
     this.sliderChangeMin(min * 1000000000000)
     this.sliderChangeMax(max * 1000000000000)
     const priceMin = String(min)