From 42670d6d5d994e8620ff3b086381b4ab8dc2049e Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Fri, 29 Mar 2024 12:16:40 +0100
Subject: [PATCH] restore negative marginLeft

---
 packages/bento-design-system/src/Layout/Column.css.ts | 9 +++------
 packages/bento-design-system/src/Layout/Columns.tsx   | 6 +++---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/bento-design-system/src/Layout/Column.css.ts b/packages/bento-design-system/src/Layout/Column.css.ts
index 924397f70..27a54f93d 100644
--- a/packages/bento-design-system/src/Layout/Column.css.ts
+++ b/packages/bento-design-system/src/Layout/Column.css.ts
@@ -4,15 +4,12 @@ import { Breakpoint, breakpoints } from "../util/breakpoints";
 
 export const columnsSpace = createVar("columns-space");
 
-export const column = style({});
+export const columns = style({
+  marginLeft: `calc(${columnsSpace} * -1)`,
+});
 
 export const columnContent = style({
   marginLeft: columnsSpace,
-  selectors: {
-    [`${column}:first-child &`]: {
-      marginLeft: 0,
-    },
-  },
 });
 
 const styleForScale = (scale: number): StyleRule => ({
diff --git a/packages/bento-design-system/src/Layout/Columns.tsx b/packages/bento-design-system/src/Layout/Columns.tsx
index 406edef4d..d58bdf929 100644
--- a/packages/bento-design-system/src/Layout/Columns.tsx
+++ b/packages/bento-design-system/src/Layout/Columns.tsx
@@ -16,7 +16,7 @@ import {
   mobileWidths,
   fullWidth,
   columnsSpace,
-  column,
+  columns,
   columnContent,
 } from "./Column.css";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -36,9 +36,8 @@ export function Column({ children, width, sticky }: ColumnProps) {
 
   const className =
     width == null
-      ? [column, fullWidth]
+      ? fullWidth
       : [
-          column,
           wide && wideWidths[wide],
           desktop && desktopWidths[desktop],
           tablet && tabletWidths[tablet],
@@ -65,6 +64,7 @@ export function Columns({ space, children, align, alignY, collapseBelow, reverse
       display="flex"
       {...responsiveCollapsibleAlignmentProps({ align, alignY, collapseBelow, reverse })}
       style={assignInlineVars({ [columnsSpace]: `${space}px` })}
+      className={columns}
     >
       {flattenChildren(children).map((child, index) => {
         if (isColumn(child)) {