Fix missing full width for dataset selector (#200)

components/DatasetsSelect.vue

@@ -36,7 +36,7 @@
         <span class="fr-hr-or-text">{{ t('or') }}</span>
       </p>
       <form
-        class="flex items-center space-x-4"
+        class="flex items-end space-x-4"
         @submit.prevent="loadDatasetByLink"
       >
         <InputGroup
@@ -45,15 +45,14 @@
           :placeholder="'https://...'"
           :has-error="!!datasetUrlError"
           :error-text="datasetUrlError"
-          class="w-100"
+          class="w-100 !mb-0"
         />
-        <button
+        <BrandedButton
           type="submit"
-          class="fr-btn"
+          :icon="RiAddLine"
+          size="sm"
           :title="t('Add dataset')"
-        >
-          <RiAddLine />
-        </button>
+        />
       </form>
     </div>
     <div
@@ -72,7 +71,10 @@
         >
           <RiDraggable class="size-8" />
         </button>
-        <CardLg :dataset />
+        <CardLg
+          class="flex-1"
+          :dataset
+        />
         <button
           type="button"
           class="fr-btn fr-btn--tertiary-no-outline shrink-0"

components/SearchableSelect.vue

@@ -135,6 +135,7 @@ import {
   ComboboxOption,
   TransitionRoot,
 } from '@headlessui/vue'
+import { watchDebounced } from '@vueuse/core';
 
 type ModelType = Multiple extends false ? T : Array<T>
 
@@ -209,7 +210,7 @@ const query = ref('')
 
 const suggestedOptions = ref<Array<T> | null>(null)
 
-watchEffect(async () => {
+watchDebounced(query, async () => {
   if (!props.suggest) return
 
   const savedQuery = query.value
@@ -218,7 +219,7 @@ watchEffect(async () => {
   if (savedQuery === query.value) {
     suggestedOptions.value = options
   }
-})
+}, { debounce: 400, maxWait: 800 })
 
 const filteredOptions = computed<Array<T>>(() => {
   if (props.suggest) {