fix: add borderWidth to column space calculation

app/client/src/sagas/WidgetOperationUtils.ts

@@ -766,7 +766,14 @@ export function getSnappedGrid(LayoutWidget: WidgetProps, canvasWidth: number) {
     // Widgets like ListWidget choose to have no container padding so will only have widget padding
     padding = WIDGET_PADDING * 2;
   }
-  const width = canvasWidth - padding;
+  const borderWidth =
+    LayoutWidget.appPositioningType === AppPositioningTypes.AUTO
+      ? parseInt(
+          LayoutWidget?.borderWidth || LayoutWidget?.parentBorderWidth || "0",
+          10,
+        ) || 0
+      : 0;
+  const width = canvasWidth - padding - borderWidth * 2;
   return {
     snapGrid: {
       snapRowSpace: GridDefaults.DEFAULT_GRID_ROW_HEIGHT,

app/client/src/utils/autoLayout/AutoLayoutUtils.ts

@@ -538,8 +538,9 @@ function getPadding(canvas: FlattenedWidgetProps): number {
   if (canvas.noPad) {
     padding -= WIDGET_PADDING;
   }
-
-  return padding;
+  const borderWidth: number =
+    parseInt(canvas?.borderWidth || canvas?.parentBorderWidth || "0", 10) || 0;
+  return padding + borderWidth * 2;
 }
 
 /**

app/client/src/utils/autoLayout/autoLayoutUtils.test.ts

@@ -188,7 +188,9 @@ describe("test AutoLayoutUtils methods", () => {
     const mainCanvasWidth = 1166;
     const widgets = dataForgetCanvasDimensions;
     const mainContainerPadding = 4 * 2;
+    const containerBorderWidth = 1 * 2;
     const containerPadding = (4 + AUTO_LAYOUT_CONTAINER_PADDING) * 2;
+
     it("should return proper dimension for MainContainer", () => {
       const button0parent = widgets["kv4o6eopdn"]
         .parentId as keyof typeof widgets;
@@ -211,7 +213,10 @@ describe("test AutoLayoutUtils methods", () => {
         false,
       );
       expect(canvasWidth).toEqual(
-        mainCanvasWidth - mainContainerPadding - containerPadding,
+        mainCanvasWidth -
+          mainContainerPadding -
+          containerPadding -
+          containerBorderWidth,
       );
     });
 
@@ -225,7 +230,9 @@ describe("test AutoLayoutUtils methods", () => {
         false,
       );
       expect(canvasWidth).toEqual(
-        (mainCanvasWidth - mainContainerPadding) / 4 - containerPadding,
+        (mainCanvasWidth - mainContainerPadding) / 4 -
+          containerPadding -
+          containerBorderWidth,
       );
     });
 
@@ -239,8 +246,13 @@ describe("test AutoLayoutUtils methods", () => {
         false,
       );
       expect(canvasWidth).toEqual(
-        (mainCanvasWidth - mainContainerPadding - containerPadding) / 4 -
-          containerPadding,
+        (mainCanvasWidth -
+          mainContainerPadding -
+          containerPadding -
+          containerBorderWidth) /
+          4 -
+          containerPadding -
+          containerBorderWidth,
       );
     });
   });

app/client/src/widgets/withWidgetProps.tsx

@@ -45,6 +45,7 @@ import { CANVAS_DEFAULT_MIN_HEIGHT_PX } from "constants/AppConstants";
 import { getGoogleMapsApiKey } from "@appsmith/selectors/tenantSelectors";
 import ConfigTreeActions from "utils/configTree";
 import { getSelectedWidgetAncestry } from "../selectors/widgetSelectors";
+import { getParentWidget } from "../selectors/widgetSelectors";
 
 const WIDGETS_WITH_CHILD_WIDGETS = ["LIST_WIDGET", "FORM_WIDGET"];
 const WIDGETS_REQUIRING_SELECTED_ANCESTRY = ["MODAL_WIDGET", "TABS_WIDGET"];
@@ -66,7 +67,12 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) {
       getWidget(state, widgetId),
     );
 
+    const parentWidget = useSelector((state: AppState) =>
+      getParentWidget(state, widgetId),
+    );
+
     const mainCanvasWidth = useSelector(getCanvasWidth);
+
     const metaWidget = useSelector(getMetaWidget(widgetId));
 
     const mainCanvasProps = useSelector((state: AppState) =>
@@ -192,6 +198,10 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) {
         widgetProps.shouldScrollContents = props.shouldScrollContents;
         widgetProps.canExtend = props.canExtend;
         widgetProps.parentId = props.parentId;
+
+        widgetProps.parentBorderWidth = parentWidget
+          ? parentWidget?.borderWidth || "0"
+          : "0";
       } else if (widgetId !== MAIN_CONTAINER_WIDGET_ID) {
         widgetProps.parentColumnSpace = props.parentColumnSpace;
         widgetProps.parentRowSpace = props.parentRowSpace;