chore: shift the chat button when scrollbar shows

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,
   };
 }

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}

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,

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]);
 

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;
+};

app/client/packages/utils/src/dom/index.ts

@@ -0,0 +1 @@
+export { getScrollbarWidth } from "./getScrollbarWidth";

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";