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>