make whole page element scrollable

packages/app/src/Pages/Layout/LogoHeader.tsx

@@ -14,7 +14,7 @@ export function LogoHeader() {
   };
 
   const handleLogoClick = () => {
-    window.scrollTo({ top: 0 });
+    window.scrollTo({ top: 0, behavior: "instant" });
   };
 
   return (

packages/app/src/Pages/Layout/index.tsx

@@ -47,7 +47,7 @@ export default function Index() {
   const handleKeyboardShortcut = useCallback(event => {
     if (event.target && !isFormElement(event.target as HTMLElement)) {
       event.preventDefault();
-      window.scrollTo({ top: 0, behavior: "smooth" });
+      window.scrollTo({ top: 0, behavior: "instant" });
     }
   }, []);
 
@@ -56,15 +56,15 @@ export default function Index() {
   const isStalker = !!stalker;
 
   return (
-    <div className="h-screen flex justify-center">
-      <div className={`${pageClass} w-full max-w-screen-xl overflow-x-hidden`}>
+    <div className="flex justify-center">
+      <div className={`${pageClass} w-full max-w-screen-xl`}>
         {!shouldHideHeader && <Header />}
         <div className="flex flex-row w-full">
-          <NavSidebar className="w-1/4 flex-shrink-0" />
+          <NavSidebar />
           <div className="flex flex-1 flex-col overflow-x-hidden">
             <Outlet />
           </div>
-          <RightColumn className="w-1/4 flex-shrink-0" />
+          <RightColumn />
         </div>
         <div className="md:hidden">
           <NoteCreatorButton className="note-create-button" />

packages/app/src/index.css

@@ -132,10 +132,6 @@ a.ext {
   overflow-wrap: break-word;
 }
 
-#root {
-  overflow-x: hidden;
-}
-
 .b {
   border: 1px solid var(--border-color);
 }