diff options
| -rw-r--r-- | src/alf/breakpoints.ts | 4 | ||||
| -rw-r--r-- | src/components/Layout/const.ts | 2 | ||||
| -rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 8 |
3 files changed, 9 insertions, 5 deletions
diff --git a/src/alf/breakpoints.ts b/src/alf/breakpoints.ts index f30a4b489..c9f66a77f 100644 --- a/src/alf/breakpoints.ts +++ b/src/alf/breakpoints.ts @@ -31,8 +31,8 @@ export function useBreakpoints(): Record<Breakpoint, boolean> & { * Fine-tuned breakpoints for the shell layout */ export function useLayoutBreakpoints() { - const rightNavVisible = useMediaQuery({minWidth: 1075}) - const centerColumnOffset = useMediaQuery({minWidth: 1075, maxWidth: 1300}) + const rightNavVisible = useMediaQuery({minWidth: 1100}) + const centerColumnOffset = useMediaQuery({minWidth: 1100, maxWidth: 1300}) const leftNavMinimal = useMediaQuery({maxWidth: 1300}) return { diff --git a/src/components/Layout/const.ts b/src/components/Layout/const.ts index 63bb05cb0..2b5d3a1fc 100644 --- a/src/components/Layout/const.ts +++ b/src/components/Layout/const.ts @@ -18,4 +18,4 @@ export const HEADER_SLOT_SIZE = 34 /** * How far to shift the center column when in the tablet breakpoint */ -export const CENTER_COLUMN_OFFSET = -130 +export const CENTER_COLUMN_OFFSET = -105 diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 59f7ce2a1..18ce42ee8 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -58,6 +58,8 @@ export function DesktopRightNav({routeName}: {routeName: string}) { return null } + const width = centerColumnOffset ? 250 : 300 + return ( <View style={[ @@ -67,10 +69,12 @@ export function DesktopRightNav({routeName}: {routeName: string}) { position: 'fixed', left: '50%', transform: [ - {translateX: 300 + (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0)}, + { + translateX: 300 + (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0), + }, ...a.scrollbar_offset.transform, ], - width: 300 + gutters.paddingLeft, + width: width + gutters.paddingLeft, maxHeight: '100%', overflowY: 'auto', }), |