diff --git a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx
index 99a69e877600..81e6a1c31bfe 100644
--- a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx
+++ b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx
@@ -5,6 +5,7 @@ import { objectKeys } from "@appsmith/utils";
 import type { Theme } from "../../theme";
 import type { ThemeToken, Typography } from "../../token";
 import { cssRule, getTypographyClassName } from "../../utils";
+import { getScrollbarWidth } from "@appsmith/utils";
 
 const fontFamilyCss = () => {
   const fontFamilyCss =
@@ -91,11 +92,18 @@ export function useCssTokens(props: Theme) {
     }
   }, [colorMode]);
 
+  const scrollbarWidthClassName = useMemo(() => {
+    return css`
+      --scrollbar-width: ${getScrollbarWidth()}px;
+    `;
+  }, []);
+
   return {
     colorClassName,
     colorModeClassName,
     fontFamilyClassName,
     typographyClassName,
     providerClassName,
+    scrollbarWidthClassName,
   };
 }
diff --git a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx
index 1cfb2f1bb634..6ec2ff8b4e05 100644
--- a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx
+++ b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx
@@ -19,6 +19,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     colorModeClassName,
     fontFamilyClassName,
     providerClassName,
+    scrollbarWidthClassName,
     typographyClassName,
   } = useCssTokens(theme);
 
@@ -32,6 +33,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
           fontFamilyClassName,
           providerClassName,
           typographyClassName,
+          scrollbarWidthClassName,
         )}
         data-theme-provider=""
         ref={providerRef}
diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
index 8260e1c651fa..0ee7279fcf4c 100644
--- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
@@ -56,6 +56,11 @@
   margin-block: var(--inner-spacing-1);
 }
 
+.inputGroup:has([data-has-scrollbar]):has(.input:is(textarea))
+  [data-input-suffix] {
+  right: calc(var(--sizing-1) + var(--scrollbar-width));
+}
+
 .input:autofill,
 .input:autofill:hover,
 .input:autofill:focus,
diff --git a/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx b/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
index 78f9ec21274c..6fc6c23c2f93 100644
--- a/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
+++ b/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
@@ -73,9 +73,15 @@ export function TextArea(props: TextAreaProps) {
 
       setTextFieldHeight(height + marginTop + marginBottom);
 
-      input.style.height = `${input.scrollHeight}px`;
+      input.style.height = `${input.scrollHeight + 1}px`;
       input.style.overflow = prevOverflow;
       input.style.alignSelf = prevAlignment;
+
+      if (input.scrollHeight > input.clientHeight) {
+        input.setAttribute("data-has-scrollbar", "true");
+      } else {
+        input.removeAttribute("data-has-scrollbar");
+      }
     }
   }, [props.height]);
 
diff --git a/app/client/packages/utils/src/dom/getScrollbarWidth.ts b/app/client/packages/utils/src/dom/getScrollbarWidth.ts
new file mode 100644
index 000000000000..108dc1ab509d
--- /dev/null
+++ b/app/client/packages/utils/src/dom/getScrollbarWidth.ts
@@ -0,0 +1,15 @@
+export const getScrollbarWidth = () => {
+  const scrollDiv = document.createElement("div");
+
+  scrollDiv.setAttribute(
+    "style",
+    "width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;",
+  );
+  document.body.appendChild(scrollDiv);
+
+  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+  document.body.removeChild(scrollDiv);
+
+  return scrollbarWidth;
+};
diff --git a/app/client/packages/utils/src/dom/index.ts b/app/client/packages/utils/src/dom/index.ts
new file mode 100644
index 000000000000..91fe42a80512
--- /dev/null
+++ b/app/client/packages/utils/src/dom/index.ts
@@ -0,0 +1 @@
+export { getScrollbarWidth } from "./getScrollbarWidth";
diff --git a/app/client/packages/utils/src/index.ts b/app/client/packages/utils/src/index.ts
index bde100269226..7004005eada7 100644
--- a/app/client/packages/utils/src/index.ts
+++ b/app/client/packages/utils/src/index.ts
@@ -3,3 +3,4 @@ export * from "./file";
 export * from "./object";
 export * from "./url";
 export * from "./validateApiPath";
+export * from "./dom";