somehow this works better

src/app.tsx

@@ -160,7 +160,7 @@ function AppLayout(props: { children: any }) {
         <LeftBar />
         <div
           id="center-body"
-          class="bg-base relative h-screen w-screen overflow-x-hidden md:ml-62.5 md:w-[calc(100vw-500px)]"
+          class="bg-base relative h-screen w-screen overflow-x-hidden md:ml-[250px] md:w-[calc(100vw-500px)]"
         >
           <noscript>
             <div class="bg-yellow text-crust border-text fixed top-0 z-150 border-b-2 p-4 text-center font-semibold md:w-[calc(100vw-500px)]">

src/components/Bars.tsx

@@ -616,6 +616,7 @@ export function RightBar() {
         "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
         "box-shadow": "inset 6px 0 16px -6px rgba(0, 0, 0, 0.1)",
         "padding-top": "env(safe-area-inset-top)",
+        width: "250px",
         "padding-bottom": "env(safe-area-inset-bottom)",
         "scrollbar-width": "none"
       }}