make the sidebar smaller when offset, reduce total offset (#8052)

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 {

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

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