popper makes it work better.

src/clj/auto_ap/ssr/components/inputs.clj

@@ -80,18 +80,22 @@ c.clearChoices();
                            :active -1
                            :elements (if ((:value-fn params identity) (:value params))
                                        [{:value ((:value-fn params identity) (:value params)) :label ((:content-fn params identity) (:value params))}]
-                                       [])})
+                                       [])
+                           :popper nil})
          :x-modelable "value.value"
          :x-model (:x-model params)
-         :class "relative"}
+         :x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed'})"
+         }
    [:a {:class                        (-> (hh/add-class (or (:class params) "") default-input-classes)
                                           (hh/add-class "cursor-pointer"))
-        "@click.prevent"         "open = !open;"
-        "@keydown.enter.prevent.stop" "open = !open;"
-        "@keydown.down.prevent.stop" "open = true;"
-        "@keydown.backspace" "value = {value: '', label: '' }"
+        "@click.prevent"              "open = !open; popper.update()"
+        "@keydown.enter.prevent.stop" "open = !open; popper.update()"
+        "@keydown.down.prevent.stop"  "open = true; popper.update()"
+        "@keydown.backspace"          "value = {value: '', label: '' }"
         :tabindex                     0
-        :x-init                       (:x-init params)}
+        :x-init                       (:x-init params)
+        :x-ref                        "input"
+        }
     [:input (-> params
                 (dissoc :class)
                 (dissoc :value-fn)
@@ -109,7 +113,8 @@ c.clearChoices();
      [:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
       svg/drop-down]]]
 
-   [:ul.dropdown-contents {:class                     "absolute bg-gray-50 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50 mt-1"
+   [:ul.dropdown-contents {:class                     "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50"
+                           "x-ref" "dropdown"
                            "@keydown.escape"   "open = false; value = {value: '', label: '' }"
                            "x-transition:enter"       "ease-[cubic-bezier(.3,2.3,.6,1)] duration-200"
                            "x-transition:enter-start" "!opacity-0 !mt-0"

src/clj/auto_ap/ssr/ui.clj

@@ -61,9 +61,12 @@ input[type=number] {
     -moz-appearance:textfield; /* Firefox */
 } "]
 
+
     [:body {:hx-ext "disable-submit"}
      contents
      [:script {:src "/js/flowbite.min.js"}]
+
+     [:div#tooltip.bg-red-500.p-12 {:role "tooltip"}]
      [:div#modal-holder
       {:tabindex   "-1", :class "fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen"
        "x-show" "open"