set max height on ql-editor div (#6095)

hicommonwealth · Jan 5, 2024 · 91d9baf · 91d9baf
1 parent b922412
commit 91d9baf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/...es/commonwealth/client/scripts/views/components/react_quill_editor/react_quill_editor.tsx b/...es/commonwealth/client/scripts/views/components/react_quill_editor/react_quill_editor.tsx
@@ -278,7 +278,7 @@ const ReactQuillEditor = ({
                         className={clsx('QuillEditor', className, {
                           markdownEnabled: isMarkdownEnabled,
                         })}
-                        scrollingContainer="html"
+                        scrollingContainer="ql-container"
                         placeholder={placeholder}
                         tabIndex={tabIndex}
                         theme="snow"

diff --git a/packages/commonwealth/client/styles/components/react_quill/react_quill_editor.scss b/packages/commonwealth/client/styles/components/react_quill/react_quill_editor.scss
@@ -120,19 +120,22 @@
   .ql-container {
     min-height: 212px;
     max-height: 512px;
-    overflow-y: scroll;
+    overflow: auto;
     border: none !important;
   }
 
   .ql-editor {
     min-height: 212px;
+    max-height: 512px;
 
     &.ql-blank::before {
       font-style: normal;
     }
+
     & h1 {
       font-size: 24px !important;
     }
+
     & h2 {
       font-size: 20px !important;
     }
@@ -162,11 +165,9 @@
 
     .inner-circle {
       border-radius: inherit;
-      background-image: conic-gradient(
-        #fff,
-        rgba(80, 200, 120, 0.3),
-        rgb(80, 200, 120)
-      );
+      background-image: conic-gradient(#fff,
+          rgba(80, 200, 120, 0.3),
+          rgb(80, 200, 120));
       position: absolute;
       z-index: -1;
       margin: auto;
@@ -181,6 +182,7 @@
       0% {
         transform: rotate(0deg);
       }
+
       100% {
         transform: rotate(360deg);
       }
@@ -294,4 +296,4 @@
 
 .image-uploading {
   display: none;
-}
+}