From a48e64e72a1e5a89f3615ed82005c42b4549eb2f Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 24 Mar 2025 22:23:27 +0200
Subject: make the sidebar smaller when offset, reduce total offset (#8052)

---
 src/alf/breakpoints.ts              | 4 ++--
 src/components/Layout/const.ts      | 2 +-
 src/view/shell/desktop/RightNav.tsx | 8 ++++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

(limited to 'src')

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',
         }),
-- 
cgit 1.4.1