fix: try to fix the case of auto complete panel overflow

src/main/frontend/components/editor.cljs

@@ -309,18 +309,33 @@
               (on-submit command @input-value pos)))])))))
 
 (rum/defc absolute-modal < rum/static
-  [cp set-default-width? {:keys [top left]}]
-  [:div.absolute.rounded-md.shadow-lg.absolute-modal
-   {:style (merge
-            {:top (+ top 24)
-             :max-height 600
-             :z-index 11}
-            (if set-default-width?
-              {:width 400})
-            (if config/mobile?
-              {:left 0}
-              {:left left}))}
-   cp])
+  [cp set-default-width? {:keys [top left rect]}]
+  (let [max-height 500
+        max-width 300
+        offset-top 24
+        vw-height js/window.innerHeight
+        vw-width js/window.innerWidth
+        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)
+                            delta-height
+                            max-height))
+                        max-height)
+        x-overflow? (if (and (seq rect) (> vw-width max-width))
+                      (let [delta-width (- vw-width (+ (:left rect) left))]
+                        (< delta-width (* max-width 0.5))))] ;; FIXME: for translateY layer
+    [:div.absolute.rounded-md.shadow-lg.absolute-modal
+     {:class (if x-overflow? "is-overflow-vw-x" "")
+      :style (merge
+              {:top        (+ top offset-top)
+               :max-height to-max-height
+               :z-index    11}
+              (if set-default-width?
+                {:width max-width})
+              (if config/mobile?
+                {:left 0}
+                {:left left}))}
+     cp]))
 
 (rum/defc transition-cp < rum/reactive
   [cp set-default-width? pos]

src/main/frontend/components/editor.css

@@ -23,17 +23,23 @@
 .editor-inner {
   position: relative;
   display: flex;
+
+  textarea {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    padding: 0;
+    resize: none;
+  }
 }
 
 .absolute-modal {
+  overflow: auto;
   background: var(--ls-primary-background-color);
-}
 
-.editor-inner textarea {
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  padding: 0;
+  &.is-overflow-vw-x {
+    transform: translateX(calc(-100% + 1rem));
+  }
 }
 
 .non-block-editor textarea,

src/main/frontend/components/journal.css

@@ -4,6 +4,7 @@
   textarea {
     word-break: break-word;
     overflow: hidden;
+    resize: none;
   }
 
   .journal-item {

src/main/frontend/components/sidebar.css

@@ -46,6 +46,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  padding-bottom: 30px;
 }
 
 .cp__sidebar-main-layout {

src/main/frontend/ui.cljs

@@ -70,7 +70,7 @@
 
 (rum/defc menu-link
   [options child]
-  [:a.block.px-4.py-2.text-sm.text-gray-700.transition.ease-in-out.duration-150.cursor.menu-link.overflow-hidden
+  [:a.block.px-4.py-2.text-sm.text-gray-700.transition.ease-in-out.duration-150.cursor.menu-link
    options
    child])
 

src/main/frontend/util.cljs

@@ -263,7 +263,9 @@
 (defn get-caret-pos
   [input]
   (try
-    (bean/->clj ((gobj/get caret-pos "position") input))
+    (let [pos ((gobj/get caret-pos "position") input)]
+      (set! pos -rect (.. input (getBoundingClientRect) (toJSON)))
+      (bean/->clj pos))
     (catch js/Error e
       (js/console.error e))))