fix: calc result overlaps with input text when the latter is very long

close #4147
logseq · Feb 17, 2022 · 904c3a9 · 904c3a9
1 parent f00bfb8
commit 904c3a9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 21 deletions.
diff --git a/src/main/frontend/extensions/calc.cljc b/src/main/frontend/extensions/calc.cljc
@@ -97,7 +97,7 @@
                                                      (.stopPropagation e))}
         ;; TODO: add react keys
         (for [[i line] (map-indexed vector output-lines)]
-          [:div.extensions__code-calc-output-line {:key i}
+          [:div.extensions__code-calc-output-line.CodeMirror-line {:key i}
            [:span (cond
                     (nil? line)           ""
                     (failure? line) "?"

diff --git a/src/main/frontend/extensions/code.cljs b/src/main/frontend/extensions/code.cljs
@@ -294,13 +294,15 @@
      (when-not (= mode "calc")
        [:div.extensions__code-lang
         (string/lower-case mode)]))
-   [:textarea (merge {:id id
-                      ;; Expose the textarea associated with the CodeMirror instance via
-                      ;; ref so that we can autofocus into the CodeMirror instance later.
-                      :ref textarea-ref-name
-                      :default-value code} attr)]
-   (when (= (:data-lang attr) "calc")
-     (calc/results (:calc-atom state)))])
+   [:div.flex.flex-1.flex-row
+    [:div.w-full
+     [:textarea (merge {:id id
+                        ;; Expose the textarea associated with the CodeMirror instance via
+                        ;; ref so that we can autofocus into the CodeMirror instance later.
+                        :ref textarea-ref-name
+                        :default-value code} attr)]]
+    (when (= (:data-lang attr) "calc")
+      (calc/results (:calc-atom state)))]])
 
 ;; Focus into the CodeMirror editor rather than the normal "raw" editor
 (defmethod commands/handle-step :codemirror/focus [[_]]

diff --git a/src/main/frontend/extensions/code.css b/src/main/frontend/extensions/code.css
@@ -21,24 +21,13 @@
   }
 
   &-calc {
-    @apply absolute right-0 text-sm;
+    @apply text-sm;
     padding: 0 0.25em;
-    margin-top: 24px;
-    top: 3px;
-    z-index: 1;
-    background: transparent;
     width: max-content;
     text-align: right;
 
     &-output-line {
-      height: 23px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-
-      > span {
-          font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
-      }
+      word-break: normal;
     }
   }