From f2d2b561718190919835daedf683fd04477ceabf Mon Sep 17 00:00:00 2001 From: Johanna Antonelli Date: Tue, 10 Dec 2024 21:53:56 +0000 Subject: [PATCH] Fix editor expanding beyond viewport on long text Fixes #40 --- src/cljs/xt_play/components/editor.cljs | 5 +++-- src/cljs/xt_play/view.cljs | 8 ++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/cljs/xt_play/components/editor.cljs b/src/cljs/xt_play/components/editor.cljs index 1f41ee0..0529129 100644 --- 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 index 13d0721..4a66b0d 100644 --- 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]))