From d53b8e58ce41033f0f2109ee5965d7388d3e0346 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Mon, 2 Dec 2024 18:11:20 -0600
Subject: [PATCH] Fix sidebar alignment

---
 src/view/shell/desktop/LeftNav.tsx  | 18 +++++++++++++++++-
 src/view/shell/desktop/RightNav.tsx | 14 +++++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index b4ae5db96c..5c2ac3876f 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -322,6 +322,7 @@ export function DesktopLeftNav() {
     <View
       role="navigation"
       style={[
+        a.px_xl,
         styles.leftNav,
         isTablet && styles.leftNavTablet,
         pal.view,
@@ -479,7 +480,19 @@ const styles = StyleSheet.create({
     position: 'fixed',
     top: 10,
     // @ts-ignore web only
-    left: 'calc(50vw - 300px - 220px - 20px)',
+    left: '50%',
+    transform: [
+      {
+        translateX: -300,
+      },
+      {
+        translateX: '-100%',
+      },
+      {
+        // @ts-ignore web only -esb
+        translateX: 'var(--scrollbar-offset-negative, 0px)',
+      },
+    ],
     width: 220,
     // @ts-ignore web only
     maxHeight: 'calc(100vh - 10px)',
@@ -492,7 +505,10 @@ const styles = StyleSheet.create({
     borderRightWidth: 1,
     height: '100%',
     width: 76,
+    paddingLeft: 0,
+    paddingRight: 0,
     alignItems: 'center',
+    transform: [],
   },
 
   profileCard: {
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 4f413211f1..a8c260088a 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -28,7 +28,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
   }
 
   return (
-    <View style={[styles.rightNav, pal.view]}>
+    <View style={[a.px_xl, styles.rightNav, pal.view]}>
       <View style={{paddingVertical: 20}}>
         {routeName === 'Search' ? (
           <View style={{marginBottom: 18}}>
@@ -122,8 +122,16 @@ const styles = StyleSheet.create({
     // @ts-ignore web only
     position: 'fixed',
     // @ts-ignore web only
-    left: 'calc(50vw + 300px + 20px)',
-    width: 300,
+    left: '50%',
+    transform: [
+      {
+        translateX: 300,
+      },
+      {
+        // @ts-ignore web only -esb
+        translateX: 'var(--scrollbar-offset-negative, 0px)',
+      },
+    ],
     maxHeight: '100%',
     overflowY: 'auto',
   },