From 233306c8465d63b5845e0adfd3043750b7a3e229 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Thu, 16 Nov 2023 20:29:08 +0000
Subject: [PATCH] fix(search):  use fixed strategy for floating selects

---
 .../posts/navigation/search/SearchSelect.vue  | 108 +++++++++---------
 1 file changed, 53 insertions(+), 55 deletions(-)

diff --git a/components/pages/posts/navigation/search/SearchSelect.vue b/components/pages/posts/navigation/search/SearchSelect.vue
index 5ec693e8..6eb450f0 100644
--- a/components/pages/posts/navigation/search/SearchSelect.vue
+++ b/components/pages/posts/navigation/search/SearchSelect.vue
@@ -30,69 +30,67 @@
   >
     <ListboxLabel class="sr-only">Change options</ListboxLabel>
 
-    <div class="relative">
-      <Float
-        :offset="8"
-        leave="transition ease-in duration-100"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-        placement="bottom-end"
-        portal
-        tailwindcss-origin-class
-      >
-        <!-- Button -->
-        <div class="inline-flex divide-x divide-base-0/20 rounded-md ring-1 ring-base-0/20">
-          <!-- Left side -->
-          <div class="inline-flex items-center gap-x-1.5 rounded-l-md px-2 py-1 text-base-content">
-            <component
-              :is="icon"
-              class="-ml-0.5 h-5 w-5"
-            />
+    <Float
+      :offset="8"
+      leave="transition ease-in duration-100"
+      leave-from="opacity-100"
+      leave-to="opacity-0"
+      placement="bottom-end"
+      strategy="fixed"
+      tailwindcss-origin-class
+    >
+      <!-- Button -->
+      <div class="inline-flex divide-x divide-base-0/20 rounded-md ring-1 ring-base-0/20">
+        <!-- Left side -->
+        <div class="inline-flex items-center gap-x-1.5 rounded-l-md px-2 py-1 text-base-content">
+          <component
+            :is="icon"
+            class="-ml-0.5 h-5 w-5"
+          />
 
-            <span class="whitespace-nowrap text-sm font-medium">{{ modelValue.title }}</span>
-          </div>
+          <span class="whitespace-nowrap text-sm font-medium">{{ modelValue.title }}</span>
+        </div>
 
-          <!-- Right side -->
-          <ListboxButton
-            ref="trigger"
-            class="focus-visible:focus-outline-util hover:hover-text-util hover:hover-bg-util inline-flex items-center rounded-l-none rounded-r-md px-2 py-1"
-          >
-            <span class="sr-only">Change published status</span>
+        <!-- Right side -->
+        <ListboxButton
+          ref="trigger"
+          class="focus-visible:focus-outline-util hover:hover-text-util hover:hover-bg-util inline-flex items-center rounded-l-none rounded-r-md px-2 py-1"
+        >
+          <span class="sr-only">Change published status</span>
 
-            <ChevronDownIcon class="-ml-0.5 h-5 w-5" />
-          </ListboxButton>
-        </div>
+          <ChevronDownIcon class="-ml-0.5 h-5 w-5" />
+        </ListboxButton>
+      </div>
 
-        <ListboxOptions
-          class="w-44 divide-y divide-base-0/20 overflow-hidden rounded-md bg-base-1000 ring-1 ring-inset ring-base-0/20 focus:outline-none"
+      <ListboxOptions
+        class="w-44 divide-y divide-base-0/20 overflow-hidden rounded-md bg-base-1000 ring-1 ring-inset ring-base-0/20 focus:outline-none"
+      >
+        <ListboxOption
+          v-for="option in options"
+          :key="option.title"
+          v-slot="{ active, selected }"
+          :value="option"
         >
-          <ListboxOption
-            v-for="option in options"
-            :key="option.title"
-            v-slot="{ active, selected }"
-            :value="option"
+          <div
+            :class="[active ? 'bg-base-0/20 text-base-content-highlight' : 'text-base-content']"
+            class="cursor-default select-none px-4 py-2.5 text-sm"
           >
-            <div
-              :class="[active ? 'bg-base-0/20 text-base-content-highlight' : 'text-base-content']"
-              class="cursor-default select-none px-4 py-2.5 text-sm"
-            >
-              <div class="flex flex-col">
-                <div class="flex justify-between">
-                  <p :class="selected ? 'font-medium' : 'font-normal'">{{ option.title }}</p>
+            <div class="flex flex-col">
+              <div class="flex justify-between">
+                <p :class="selected ? 'font-medium' : 'font-normal'">{{ option.title }}</p>
 
-                  <!-- Check icon -->
-                  <span
-                    v-if="selected"
-                    :class="active ? 'text-base-content-highlight' : 'text-base-content'"
-                  >
-                    <CheckIcon class="h-5 w-5" />
-                  </span>
-                </div>
+                <!-- Check icon -->
+                <span
+                  v-if="selected"
+                  :class="active ? 'text-base-content-highlight' : 'text-base-content'"
+                >
+                  <CheckIcon class="h-5 w-5" />
+                </span>
               </div>
             </div>
-          </ListboxOption>
-        </ListboxOptions>
-      </Float>
-    </div>
+          </div>
+        </ListboxOption>
+      </ListboxOptions>
+    </Float>
   </Listbox>
 </template>