Handle shifts in layout components

src/components/Layout/Header/index.tsx

@@ -13,6 +13,7 @@ import {
   useBreakpoints,
   useGutterStyles,
   useTheme,
+  web,
 } from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
@@ -39,6 +40,14 @@ export function Outer({children}: {children: React.ReactNode}) {
         a.py_sm,
         t.atoms.border_contrast_low,
         gtMobile && [a.mx_auto, {maxWidth: 600}],
+        web({
+          transform: [
+            {
+              translateX:
+                'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)',
+            },
+          ],
+        }),
       ]}>
       {children}
     </View>

src/components/Layout/index.tsx

@@ -142,6 +142,10 @@ export const WebCenterBorders = React.forwardRef(function LayoutContent() {
             {
               translateX: '-50%',
             },
+            {
+              translateX:
+                'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)',
+            },
           ],
         }),
       ]}
@@ -165,6 +169,14 @@ export const Center = React.forwardRef(function LayoutContent(
           maxWidth: 600,
         },
         style,
+        web({
+          transform: [
+            {
+              translateX:
+                'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)',
+            },
+          ],
+        }),
       ]}
       {...props}>
       {children}