improve(ui): edge gap for commands auto-complete modal

src/main/frontend/components/editor.cljs

@@ -340,22 +340,30 @@
 
 (rum/defc absolute-modal < rum/static
   [cp modal-name set-default-width? {:keys [top left rect]}]
-  (let [vw-width js/window.innerWidth
+  (let [MAX-HEIGHT 700
+        MAX-HEIGHT' 600
+        MAX-WIDTH 600
+        SM-MAX-WIDTH 300
+        Y-BOUNDARY-HEIGHT 150
+        vw-width js/window.innerWidth
         vw-height js/window.innerHeight
         vw-max-width (- vw-width (:left rect))
         vw-max-height (- vw-height (:top rect))
         vw-max-height' (:top rect)
         sm? (< vw-width 415)
-        max-height (min (- vw-max-height 20) 700)
-        max-height' (min (- vw-max-height' 70) 600)
-        max-width (if sm? 300 (min (max 400 (/ vw-max-width 2)) 600))
+        max-height (min (- vw-max-height 20) MAX-HEIGHT)
+        max-height' (min (- vw-max-height' 70) MAX-HEIGHT')
+        max-width (if sm? SM-MAX-WIDTH (min (max 400 (/ vw-max-width 2)) MAX-WIDTH))
         offset-top 24
-        to-max-height (if (and (seq rect) (> vw-height max-height))
-                        (let [delta-height (- vw-height (+ (:top rect) top offset-top))]
-                          (if (< delta-height max-height)
-                            (- (max (* 2 offset-top) delta-height) 16)
-                            max-height))
-                        max-height)
+        to-max-height (cond-> (if (and (seq rect) (> vw-height max-height))
+                                (let [delta-height (- vw-height (+ (:top rect) top offset-top))]
+                                  (if (< delta-height max-height)
+                                    (- (max (* 2 offset-top) delta-height) 16)
+                                    max-height))
+                                max-height)
+
+                              (= modal-name "commands")
+                              (min 500))
         right-sidebar? (:ui/sidebar-open? @state/state)
         editing-key    (first (keys (:editor/editing? @state/state)))
         *el (rum/use-ref nil)
@@ -369,8 +377,8 @@
                                    (when (> ofx 0)
                                      (set! (.-transform (.-style el)) (str "translateX(-" (+ ofx 20) "px)")))))))
                            [right-sidebar? editing-key])
-        y-overflow-vh? (or (< to-max-height 150)
-                           (> (- max-height' to-max-height) 150))
+        y-overflow-vh? (or (< to-max-height Y-BOUNDARY-HEIGHT)
+                           (> (- max-height' to-max-height) Y-BOUNDARY-HEIGHT))
         to-max-height (if y-overflow-vh? max-height' to-max-height)
         pos-rect (when (and (seq rect) editing-key)
                    (:rect (cursor/get-caret-pos (state/get-input))))

src/main/frontend/components/editor.css

@@ -44,7 +44,6 @@
   &[data-modal-name="commands"] {
     width: 380px !important;
     max-width: 90vw !important;
-    max-height: 520px !important;
   }
 }