Rebalance splitview columns (#10512)

src/components/Layout/Header/index.tsx

@@ -24,6 +24,7 @@ import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {
   BUTTON_VISUAL_ALIGNMENT_OFFSET,
   CENTER_COLUMN_OFFSET,
+  CENTER_COLUMN_WIDTH,
   HEADER_SLOT_SIZE,
   SCROLLBAR_OFFSET,
 } from '#/components/Layout/const'
@@ -65,7 +66,7 @@ export function Outer({
           web: [a.py_xs, {minHeight: 52}],
         }),
         t.atoms.border_contrast_low,
-        gtMobile && [a.mx_auto, {maxWidth: 600}],
+        gtMobile && [a.mx_auto, {maxWidth: CENTER_COLUMN_WIDTH}],
         !isWithinOffsetView &&
           !isWithinSplitView && {
             transform: [

src/components/Layout/const.ts

@@ -1,7 +1,7 @@
 export const SCROLLBAR_OFFSET =
-  'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)' as any
+  'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)' as `${number}%`
 export const SCROLLBAR_OFFSET_POSITIVE =
-  'calc(var(--removed-body-scroll-bar-size, 0px) / 2)' as any
+  'calc(var(--removed-body-scroll-bar-size, 0px) / 2)' as `${number}%`
 
 /**
  * Useful for visually aligning icons within header buttons with the elements
@@ -19,3 +19,8 @@ export const HEADER_SLOT_SIZE = 33
  * How far to shift the center column when in the tablet breakpoint
  */
 export const CENTER_COLUMN_OFFSET = -105
+
+/**
+ * How wide the center column is
+ */
+export const CENTER_COLUMN_WIDTH = 600

src/components/Layout/index.tsx

@@ -22,7 +22,11 @@ import {
   web,
 } from '#/alf'
 import {useDialogContext} from '#/components/Dialog'
-import {CENTER_COLUMN_OFFSET, SCROLLBAR_OFFSET} from '#/components/Layout/const'
+import {
+  CENTER_COLUMN_OFFSET,
+  CENTER_COLUMN_WIDTH,
+  SCROLLBAR_OFFSET,
+} from '#/components/Layout/const'
 import {ScrollbarOffsetContext} from '#/components/Layout/context'
 import {IS_WEB} from '#/env'
 
@@ -152,7 +156,7 @@ export const Center = memo(function LayoutCenter({
         a.w_full,
         !isWithinSplitView && a.mx_auto,
         gtMobile && {
-          maxWidth: 600,
+          maxWidth: CENTER_COLUMN_WIDTH,
         },
         !isWithinOffsetView &&
           !isWithinSplitView && {