Fix editor expanding beyond viewport on long text

Fixes #40
xtdb · Dec 11, 2024 · f2d2b56 · f2d2b56
1 parent 857e0f4
commit f2d2b56
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/cljs/xt_play/components/editor.cljs b/src/cljs/xt_play/components/editor.cljs
@@ -13,14 +13,15 @@
           (j/lit {; General styling
                   ".cm-content" {:white-space "pre-wrap"
                                  :padding "10px 0"
-                                 :flex "1 1 0"}
+                                 :flex "1 1 0"
+                                 :width "-webkit-fill-available"}
                   ".cm-line" {:padding "0 9px"
                               :line-height "1.6"
                               :font-size "16px"
                               :font-family "var(--code-font)"}
                   ".cm-matchingBracket" {:border-bottom "1px solid var(--teal-color)"
                                          :color "inherit"}
-                  ".cm-gutters" {:background "transparent"
+                  ".cm-gutters" {:background "white"
                                  :padding "0 9px"
                                  :line-height "1.6"
                                  :font-size "16px"

diff --git a/src/cljs/xt_play/view.cljs b/src/cljs/xt_play/view.cljs
@@ -205,7 +205,9 @@
                {:class "border md:flex-grow min-h-36"})]])])
 
 (defn- transactions [{:keys [editor]}]
-  [:div {:class "mx-4 md:mx-0 md:ml-4 md:flex-1 flex flex-col"}
+  [:div {:class (str "mx-4 md:mx-0 md:ml-4 md:flex-1 flex flex-col "
+                     ;; stop editor expanding beyond the viewport
+                     "md:max-w-[48vw] lg:max-w-[49vw]")}
    [:h2 "Transactions:"]
    ; NOTE: The min-h-0 somehow makes sure the editor doesn't
    ;       overflow the flex container
@@ -225,7 +227,9 @@
       "+"]]]])
 
 (defn- query [{:keys [editor]}]
-  [:div {:class "mx-4 md:mx-0 md:mr-4 md:flex-1 flex flex-col"}
+  [:div {:class (str "mx-4 md:mx-0 md:mr-4 md:flex-1 flex flex-col "
+                     ;; stop editor expanding beyond the viewport
+                     "md:max-w-[48vw] lg:max-w-[49vw]")}
    [:h2 "Query:"]
    [editor (merge
             (editor-update-opts :query @(rf/subscribe [:query]))