fix(ui): polish search & commands palettle

src/main/frontend/components/command_palette.cljs

@@ -44,13 +44,15 @@
   (rum/with-context [[t] i18n/*tongue-context*]
     (let [input (::input state)]
       [:div.cp__palette.cp__palette-main
-       [:input.cp__palette-input.w-full
-        {:type        "text"
-         :placeholder  (t :command-palette/prompt)
-         :auto-focus   true
-         :value       @input
-         :on-change   (fn [e] (reset! input (util/evalue e)))}]
-       [:div.w-full
+       [:div.input-wrap
+        [:input.cp__palette-input.w-full
+         {:type        "text"
+          :placeholder (t :command-palette/prompt)
+          :auto-focus  true
+          :value       @input
+          :on-change   (fn [e] (reset! input (util/evalue e)))}]]
+
+       [:div.command-results-wrap
         (ui/auto-complete
          (if (str/blank? @input)
            (cp/top-commands limit)

src/main/frontend/components/command_palette.css

@@ -1,7 +1,13 @@
 .cp__palette {
+  --palettle-input-height: 64px;
+  --palettle-container-height: 70vh;
+
   &-main {
-    max-height: 60vh;
-    margin: -1rem;
+    max-height: var(--palettle-container-height);
+    margin: -2rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     width: 80vw;
 
@@ -13,11 +19,23 @@
       background-color: transparent;
       transition: none;
       border: none;
+      border-radius: unset !important;
     }
 
     .chosen {
       background-color: var(--ls-quaternary-background-color);
     }
+
+    .command-results-wrap,
+    .search-results-wrap > div:first-child {
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: calc(var(--palettle-container-height) - var(--palettle-input-height));
+    }
+
+    .input-wrap {
+      height: var(--palettle-input-height);
+    }
   }
 
   &-input {

src/main/frontend/components/search.cljs

@@ -293,38 +293,41 @@
     (rum/with-context [[t] i18n/*tongue-context*]
      (let [input (::input state)]
        [:div.cp__palette.cp__palette-main
-        [:input.cp__palette-input.w-full
-         {:type        "text"
-          :auto-focus   true
-          :placeholder (case search-mode
-                         :graph
-                         (t :graph-search)
-                         :page
-                         (t :page-search)
-                         (t :search))
-          :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here
-          :default-value ""
-          :on-change (fn [e]
-                       (when @search-timeout
-                         (js/clearTimeout @search-timeout))
-                       (let [value (util/evalue e)]
-                         (if (string/blank? value)
-                           (search-handler/clear-search! false)
-                           (let [search-mode (state/get-search-mode)
-                                 opts (if (= :page search-mode)
-                                        (let [current-page (or (state/get-current-page)
-                                                               (date/today))]
-                                          {:page-db-id (:db/id (db/entity [:block/name (string/lower-case current-page)]))})
-                                        {})]
-                             (state/set-q! value)
-                             (reset! search-timeout
-                                     (js/setTimeout
-                                      (fn []
-                                        (if (= :page search-mode)
-                                          (search-handler/search (state/get-current-repo) value opts)
-                                          (search-handler/search (state/get-current-repo) value)))
-                                      timeout))))))}]
-        [:div.w-full
+
+        [:div.input-wrap
+         [:input.cp__palette-input.w-full
+          {:type          "text"
+           :auto-focus    true
+           :placeholder   (case search-mode
+                            :graph
+                            (t :graph-search)
+                            :page
+                            (t :page-search)
+                            (t :search))
+           :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here
+           :default-value ""
+           :on-change     (fn [e]
+                            (when @search-timeout
+                              (js/clearTimeout @search-timeout))
+                            (let [value (util/evalue e)]
+                              (if (string/blank? value)
+                                (search-handler/clear-search! false)
+                                (let [search-mode (state/get-search-mode)
+                                      opts (if (= :page search-mode)
+                                             (let [current-page (or (state/get-current-page)
+                                                                    (date/today))]
+                                               {:page-db-id (:db/id (db/entity [:block/name (string/lower-case current-page)]))})
+                                             {})]
+                                  (state/set-q! value)
+                                  (reset! search-timeout
+                                          (js/setTimeout
+                                            (fn []
+                                              (if (= :page search-mode)
+                                                (search-handler/search (state/get-current-repo) value opts)
+                                                (search-handler/search (state/get-current-repo) value)))
+                                            timeout))))))}]]
+
+        [:div.search-results-wrap
          (search-auto-complete search-result search-q false)]]))))
 
 (rum/defcs search < rum/reactive