not great but better

src/app.css

@@ -209,7 +209,6 @@
   transition-duration: 500ms;
   syntax: "*";
   inherits: false;
-  scrollbar-gutter: stable both-edges;
   scrollbar-color: var(--color-text) var(--color-base);
 }
 
@@ -225,6 +224,13 @@
   background-color: var(--color-text);
   color: var(--color-crust);
 }
+#center-body {
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+}
+#rightbar-content {
+  scrollbar-width: none;
+}
 
 body {
   background: var(--color-base);
@@ -246,6 +252,7 @@ body {
   background-color: var(--color-text);
   vertical-align: text-bottom;
   margin-left: 2px;
+  position: absolute;
 }
 
 /* Block cursor when done typing */

src/app.tsx

@@ -172,7 +172,10 @@ function AppLayout(props: { children: any }) {
     <>
       <div class="flex max-w-screen flex-row">
         <LeftBar />
-        <div class="bg-base relative h-screen w-screen overflow-x-hidden overflow-y-auto md:ml-62.5 md:w-[calc(100vw-500px)]">
+        <div
+          id="center-body"
+          class="bg-base relative h-screen w-screen overflow-x-hidden overflow-y-auto md:ml-62.5 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)]">
               JavaScript is disabled. Features will be limited.

src/components/Bars.tsx

@@ -104,7 +104,10 @@ export function RightBarContent() {
   });
 
   return (
-    <div class="text-text flex h-full flex-col gap-6 overflow-y-auto pb-6 md:w-min">
+    <div
+      id="rightbar-content"
+      class="text-text flex h-full flex-col gap-6 overflow-y-auto pb-6 md:w-min"
+    >
       <Typewriter keepAlive={false} class="z-50 px-4 md:pt-4">
         <ul class="flex flex-col gap-4">
           <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
@@ -531,7 +534,8 @@ export function RightBar() {
         width: "250px",
         "box-shadow": "inset 6px 0 16px -6px rgba(0, 0, 0, 0.1)",
         "padding-top": "env(safe-area-inset-top)",
-        "padding-bottom": "env(safe-area-inset-bottom)"
+        "padding-bottom": "env(safe-area-inset-bottom)",
+        "scrollbar-width": "none"
       }}
     >
       <RightBarContent />

src/components/Typewriter.tsx

@@ -19,6 +19,8 @@ export function Typewriter(props: {
   onMount(() => {
     if (!containerRef || !cursorRef) return;
 
+    containerRef.style.position = "relative";
+
     // FIRST: Walk DOM and split text into character spans
     const textNodes: { node: Text; text: string; startIndex: number }[] = [];
     let totalChars = 0;
@@ -58,20 +60,8 @@ export function Typewriter(props: {
     // Mark as animated AFTER DOM manipulation - this triggers CSS to hide characters
     setAnimated(true);
 
-    // Mark container as ready for animation
     containerRef.setAttribute("data-typewriter-ready", "true");
 
-    // Position cursor at the first character location
-    const firstChar = containerRef.querySelector(
-      '[data-char-index="0"]'
-    ) as HTMLElement;
-    if (firstChar && cursorRef) {
-      // Insert cursor before the first character
-      firstChar.parentNode?.insertBefore(cursorRef, firstChar);
-      // Set cursor height to match first character
-      cursorRef.style.height = `${firstChar.offsetHeight}px`;
-    }
-
     // Listen for animation end to hide cursor
     const handleAnimationEnd = () => {
       setShouldHide(true);
@@ -94,16 +84,14 @@ export function Typewriter(props: {
           if (charSpan) {
             charSpan.style.opacity = "1";
 
-            // Move cursor after this character and match its height
+            if (cursorRef && containerRef) {
-            if (cursorRef) {
+              const rect = charSpan.getBoundingClientRect();
-              charSpan.parentNode?.insertBefore(
+              const containerRect = containerRef.getBoundingClientRect();
-                cursorRef,
-                charSpan.nextSibling
-              );
 
-              // Match the height of the current character
+              // Position cursor at the end of the current character
-              const charHeight = charSpan.offsetHeight;
+              cursorRef.style.left = `${rect.right - containerRect.left}px`;
-              cursorRef.style.height = `${charHeight}px`;
+              cursorRef.style.top = `${rect.top - containerRect.top}px`;
+              cursorRef.style.height = `${charSpan.offsetHeight}px`;
             }
           }
 
@@ -131,7 +119,6 @@ export function Typewriter(props: {
       setTimeout(revealNextChar, 100);
     };
 
-    // Start delay if specified, otherwise start immediately
     if (delay > 0) {
       setTimeout(() => {
         setIsDelaying(false);