add a hacky solution to fix textarea height

appsmithorg · May 31, 2024 · ddd5571 · ddd5571
1 parent 1086cdb
commit ddd5571
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/app/client/packages/design-system/headless/src/components/TextArea/src/TextArea.tsx b/app/client/packages/design-system/headless/src/components/TextArea/src/TextArea.tsx
@@ -49,8 +49,9 @@ function TextArea(props: TextAreaProps, ref: TextAreaRef) {
       input.style.alignSelf = "start";
       input.style.height = "auto";
       // offsetHeight - clientHeight accounts for the border/padding.
+      // Also, adding 1px to fix a bug in browser where there is a scrolllbar on certain heights
       input.style.height = `${
-        input.scrollHeight + (input.offsetHeight - input.clientHeight)
+        input.scrollHeight + (input.offsetHeight - input.clientHeight) + 1
       }px`;
       input.style.overflow = prevOverflow;
       input.style.alignSelf = prevAlignment;

diff --git a/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css b/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css
@@ -23,7 +23,7 @@
     text-overflow: ellipsis;
     max-inline-size: 100%;
     width: 100%;
-    box-sizing: content-box;
+    box-sizing: border-box;
     block-size: calc(
       var(--body-line-height) + var(--body-margin-start) +
         var(--body-margin-end)