6 files changed, 19 insertions, 7 deletions
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
index 8ef114b44..44faa9649 100644
--- a/src/components/Layout/Header/index.tsx
+++ b/src/components/Layout/Header/index.tsx
@@ -23,6 +23,7 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {
   BUTTON_VISUAL_ALIGNMENT_OFFSET,
+  CENTER_COLUMN_OFFSET,
   HEADER_SLOT_SIZE,
   SCROLLBAR_OFFSET,
 } from '#/components/Layout/const'
@@ -65,7 +66,7 @@ export function Outer({
         gtMobile && [a.mx_auto, {maxWidth: 600}],
         !isWithinOffsetView && {
           transform: [
-            {translateX: centerColumnOffset ? -150 : 0},
+            {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0},
             {translateX: web(SCROLLBAR_OFFSET) ?? 0},
           ],
         },
diff --git a/src/components/Layout/const.ts b/src/components/Layout/const.ts
index 11825d323..63bb05cb0 100644
--- a/src/components/Layout/const.ts
+++ b/src/components/Layout/const.ts
@@ -14,3 +14,8 @@ export const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3
  * Corresponds to the width of a small square or round button
  */
 export const HEADER_SLOT_SIZE = 34
+
+/**
+ * How far to shift the center column when in the tablet breakpoint
+ */
+export const CENTER_COLUMN_OFFSET = -130
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 623478a6a..a61192b86 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -21,7 +21,7 @@ import {
   web,
 } from '#/alf'
 import {useDialogContext} from '#/components/Dialog'
-import {SCROLLBAR_OFFSET} from '#/components/Layout/const'
+import {CENTER_COLUMN_OFFSET, SCROLLBAR_OFFSET} from '#/components/Layout/const'
 import {ScrollbarOffsetContext} from '#/components/Layout/context'
 
 export * from '#/components/Layout/const'
@@ -173,7 +173,7 @@ export const Center = React.memo(function LayoutContent({
                 centerColumnOffset &&
                 !ignoreTabletLayoutOffset &&
                 !isWithinDialog
-                  ? -150
+                  ? CENTER_COLUMN_OFFSET
                   : 0,
             },
             {translateX: web(SCROLLBAR_OFFSET) ?? 0},
@@ -209,7 +209,7 @@ const WebCenterBorders = React.memo(function LayoutContent() {
           left: '50%',
           transform: [
             {translateX: '-50%'},
-            {translateX: centerColumnOffset ? -150 : 0},
+            {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0},
             ...a.scrollbar_offset.transform,
           ],
         }),
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 94cadb13e..6a11c7eaa 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -28,6 +28,7 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {addStyle} from '#/lib/styles'
 import {useLayoutBreakpoints} from '#/alf'
 import {useDialogContext} from '#/components/Dialog'
+import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
 
 interface AddedProps {
   desktopFixedHeight?: boolean | number
@@ -179,7 +180,7 @@ const styles = StyleSheet.create({
     marginRight: 'auto',
   },
   containerOffset: {
-    transform: [{translateX: -150}],
+    transform: [{translateX: CENTER_COLUMN_OFFSET}],
   },
   containerScroll: {
     width: '100%',
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 23e1d8ea2..06a9b05c3 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -69,6 +69,7 @@ import {
   UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
   UserCircle_Stroke2_Corner0_Rounded as UserCircle,
 } from '#/components/icons/UserCircle'
+import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
@@ -559,7 +560,10 @@ export function DesktopLeftNav() {
         leftNavMinimal && styles.leftNavMinimal,
         {
           transform: [
-            {translateX: centerColumnOffset ? -450 : -300},
+            {
+              translateX:
+                -300 + (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0),
+            },
             {translateX: '-100%'},
             ...a.scrollbar_offset.transform,
           ],
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 510d505cd..59f7ce2a1 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -19,6 +19,7 @@ import {
 } from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Divider} from '#/components/Divider'
+import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
 import {InlineLinkText} from '#/components/Link'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
 import {Text} from '#/components/Typography'
@@ -66,7 +67,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
           position: 'fixed',
           left: '50%',
           transform: [
-            {translateX: centerColumnOffset ? 150 : 300},
+            {translateX: 300 + (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0)},
             ...a.scrollbar_offset.transform,
           ],
           width: 300 + gutters.paddingLeft,