uses popper for dropdown.

resources/input.css

@@ -165,3 +165,26 @@
 .choices[data-type*="select-one"] .choices__button {
     right:auto !important;
 }
+
+.arrow,
+.arrow::before {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: inherit;
+}
+
+.arrow {
+  visibility: hidden;
+}
+
+
+.arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.arrow {
+  bottom: -4px;
+}

resources/public/output.css

@@ -1155,10 +1155,6 @@ input:checked + .toggle-bg {
   margin: 1rem;
 }
 
-.m-12 {
-  margin: 3rem;
-}
-
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1352,43 +1348,22 @@ input:checked + .toggle-bg {
   height: 100%;
 }
 
-.h-min {
-  height: -moz-min-content;
-  height: min-content;
-}
-
 .h-screen {
   height: 100vh;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
 
-.max-h-\[80vh\] {
-  max-height: 80vh;
-}
-
 .max-h-full {
   max-height: 100%;
 }
 
-.max-h-\[50\%\] {
-  max-height: 50%;
-}
-
 .w-1\/2 {
   width: 50%;
 }
 
-.w-1\/4 {
-  width: 25%;
-}
-
 .w-16 {
   width: 4rem;
 }
@@ -1458,30 +1433,6 @@ input:checked + .toggle-bg {
   width: 100vw;
 }
 
-.w-\[900px\] {
-  width: 900px;
-}
-
-.w-\[1200px\] {
-  width: 1200px;
-}
-
-.w-\[2900px\] {
-  width: 2900px;
-}
-
-.min-w-\[25\%\] {
-  min-width: 25%;
-}
-
-.min-w-\[500px\] {
-  min-width: 500px;
-}
-
-.min-w-\[450px\] {
-  min-width: 450px;
-}
-
 .min-w-\[700px\] {
   min-width: 700px;
 }
@@ -1494,6 +1445,10 @@ input:checked + .toggle-bg {
   max-width: 56rem;
 }
 
+.max-w-6xl {
+  max-width: 72rem;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1510,10 +1465,6 @@ input:checked + .toggle-bg {
   max-width: 1024px;
 }
 
-.max-w-6xl {
-  max-width: 72rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1538,10 +1489,6 @@ input:checked + .toggle-bg {
   flex-grow: 1;
 }
 
-.grow {
-  flex-grow: 1;
-}
-
 .basis-1\/4 {
   flex-basis: 25%;
 }
@@ -1884,10 +1831,6 @@ input:checked + .toggle-bg {
   overflow: hidden;
 }
 
-.overflow-visible {
-  overflow: visible;
-}
-
 .overflow-scroll {
   overflow: scroll;
 }
@@ -1950,6 +1893,11 @@ input:checked + .toggle-bg {
   border-top-right-radius: 0.5rem;
 }
 
+.rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -2163,11 +2111,6 @@ input:checked + .toggle-bg {
   background-color: rgb(255 230 230 / var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 3 3 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2182,11 +2125,6 @@ input:checked + .toggle-bg {
   background-color: rgb(253 246 178 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(194 120 3 / var(--tw-bg-opacity));
-}
-
 .\!bg-opacity-0 {
   --tw-bg-opacity: 0 !important;
 }
@@ -2207,10 +2145,6 @@ input:checked + .toggle-bg {
   padding: 0.25rem;
 }
 
-.p-12 {
-  padding: 3rem;
-}
-
 .p-2 {
   padding: 0.5rem;
 }
@@ -2227,10 +2161,6 @@ input:checked + .toggle-bg {
   padding: 1rem;
 }
 
-.p-8 {
-  padding: 2rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2563,6 +2493,12 @@ input:checked + .toggle-bg {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline {
   outline-style: solid;
 }
@@ -3010,6 +2946,28 @@ input:checked + .toggle-bg {
   right:auto !important;
 }
 
+.arrow,
+.arrow::before {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: inherit;
+}
+
+.arrow {
+  visibility: hidden;
+}
+
+.arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.arrow {
+  bottom: -4px;
+}
+
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -3631,22 +3589,10 @@ input:checked + .toggle-bg {
 }
 
 @media (min-width: 640px) {
-  .sm\:m-12 {
-    margin: 3rem;
-  }
-
   .sm\:block {
     display: block;
   }
 
-  .sm\:items-center {
-    align-items: center;
-  }
-
-  .sm\:justify-center {
-    justify-content: center;
-  }
-
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -3655,10 +3601,6 @@ input:checked + .toggle-bg {
     padding: 1.5rem;
   }
 
-  .sm\:p-12 {
-    padding: 3rem;
-  }
-
   .sm\:py-5 {
     padding-top: 1.25rem;
     padding-bottom: 1.25rem;

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

@@ -84,7 +84,7 @@ c.clearChoices();
                            :popper nil})
          :x-modelable "value.value"
          :x-model (:x-model params)
-         :x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed'})"
+         :x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [0, 20]}}})"
          }
    [:a {:class                        (-> (hh/add-class (or (:class params) "") default-input-classes)
                                           (hh/add-class "cursor-pointer"))
@@ -113,7 +113,7 @@ 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                     "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50"
+   [:ul.dropdown-contents {:class                     "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl 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"
@@ -124,15 +124,20 @@ c.clearChoices();
                            "x-transition:leave-end"   "!opacity-0 !mt-0"
                            "x-show "                  "open"
                            "x-trap"                   "open"
-                           "@click.outside"           "open=false; console.log('is this ihid')"}
+                           "@click.outside"           "open=false;"}
-    [:input {:type                    "text" :class (hh/add-class (or (:class params) "") default-input-classes)
+    
+    [:input {:type                    "text"
+             :class                   (-> (:class params)
+                        (or "")
+                        (hh/add-class default-input-classes)
+                        (hh/replace-wildcard ["rounded" "border"] "border-bottom bg-gray-100 rounded-t-lg w-full"))
              "x-model"                "search"
              "placeholder"            (:placeholder params)
              "@keydown.down.prevent"  "active ++; active = active >= elements.length - 1 ? elements.length - 1 : active"
              "@keydown.up.prevent"    "active --; active = active < 0 ? 0 : active"
-             "@keydown.enter.prevent" "open = false; value = elements.length > 0 ? $data.elements[active] : {'value': '', label: ''}; console.log('are we here')"
+             "@keydown.enter.prevent" "open = false; value = elements.length > 0 ? $data.elements[active] : {'value': '', label: ''};"
              "x-init"                 "$watch('search', s => { if($el.value.length > 2) {fetch(baseUrl + s).then(data=>data.json()).then(data => {elements = data; active=-1}) }})"}]
-    [:div.dropdown-options
+    [:div.dropdown-options {:class "rounded-b-lg overflow-hidden"}
      [:template {:x-for "(element, index) in elements"}
       [:li [:a {:class           "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-300 [&.active]:dark:bg-primary-700 text-gray-800  dark:text-gray-100"
                 :href            "#"
@@ -143,9 +148,11 @@ c.clearChoices();
                 "x-html"         "element.label"}]]]
      [:template {:x-if "elements.length == 0"}
       [:li {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 text-gray-800  dark:text-gray-100 text-xs "}
-       "No results found"]]]]])
+       "No results found"]]]
+    ]])
 
 
+;; TODO fix search modal
 (defn use-size [size]
   (if (= :small size)
     (str " " "text-xs p-2")

src/clj/auto_ap/ssr/ui.clj

@@ -66,7 +66,6 @@ input[type=number] {
      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"
@@ -85,11 +84,7 @@ input[type=number] {
              "x-transition:leave-start" "!bg-opacity-50"
              "x-transition:leave-end" "!bg-opacity-0"}
 
-       ;; TODO to get this right i think what needs to happen is to just set this up as having a single
+       [:div {
-       ;; div that is forced to the maximum allowed size. inside that will be a div that just centers
-       ;; the elements, allowing it to grow as necessar.  Then make the modal on the inside of this
-       ;; div just use flexbox to make the inside part be the part that scrolls
-       [:div {;;:class                     (str "sm:m-12 flex justify-center items-center bg-green-500 items-stretch inset-0")
                             :class "flex h-full w-full justify-stretch md:justify-center items-stretch md:items-center  "
                             "x-trap.inert.noscroll"    "open"
                             "x-trap.inert"             "open"