Prevent layout shift listing product names (#1031)

Author: Roene-JustBetter

resources/js/instantsearch.js

@@ -4,11 +4,13 @@ import { addQuery } from './stores/useSearchHistory'
 Vue.component('ais-instant-search', () => import('vue-instantsearch/vue2/es/src/components/InstantSearch'))
 Vue.component('ais-hits', () => import('vue-instantsearch/vue2/es/src/components/Hits.js'))
 Vue.component('ais-configure', () => import('vue-instantsearch/vue2/es/src/components/Configure.js'))
-Vue.component('ais-highlight', () => import('vue-instantsearch/vue2/es/src/components/Highlight.vue.js'))
 Vue.component('ais-autocomplete', () => import('vue-instantsearch/vue2/es/src/components/Autocomplete.vue.js'))
 Vue.component('ais-search-box', () => import('vue-instantsearch/vue2/es/src/components/SearchBox.vue.js'))
 Vue.component('ais-state-results', () => import('vue-instantsearch/vue2/es/src/components/StateResults.vue.js'))
 
+import highlight from 'vue-instantsearch/vue2/es/src/components/Highlight.vue.js'
+Vue.component('ais-highlight', highlight)
+
 // Used by Autocomplete
 Vue.component('ais-index', () => import('vue-instantsearch/vue2/es/src/components/Index.js'))
 

resources/views/listing/partials/item.blade.php

@@ -14,7 +14,7 @@ class="mb-3 h-48 w-full rounded-t object-contain"
                 />
                 <x-rapidez::no-image v-else class="mb-3 h-48 rounded-t" />
                 <div>
-                    <x-rapidez::highlight attribute="name" class="text-base font-medium hover:underline decoration-2 "/>
+                    <x-rapidez::highlight attribute="name" class="text-base font-medium hover:underline decoration-2"/>
                     @if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))
                         <x-dynamic-component component="rapidez-reviews::stars" v-if="item.reviews_count" count="item.reviews_count" score="item.reviews_score" />
                     @endif