fix: prevent duplicate page scrollbars

src/index.css

@@ -1,6 +1,15 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+html,
+body,
+#root {
+  margin: 0;
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+}
+
 button {
   cursor: pointer;
 }

src/pages/Route/route-preview/index.tsx

@@ -76,9 +76,10 @@ export const RouteMap = observer(() => {
   const parentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    const previousBodyOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
-      document.body.style.overflow = "auto";
+      document.body.style.overflow = previousBodyOverflow;
     };
   }, []);
 

src/widgets/Layout/index.tsx

@@ -42,7 +42,14 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
   };
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box
+      sx={{
+        display: "flex",
+        height: "100vh",
+        minHeight: 0,
+        overflow: "hidden",
+      }}
+    >
       <AppBar position="fixed" open={open}>
         <Toolbar className="flex justify-between">
           <div className="flex items-center">
@@ -149,9 +156,14 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
         sx={{
           width: "100%",
           flexGrow: 1,
+          minWidth: 0,
+          minHeight: 0,
+          height: "100vh",
           p: 3,
-          overflow: "auto",
+          overflowY: "auto",
+          overflowX: "hidden",
           maxWidth: "100vw",
+          boxSizing: "border-box",
         }}
       >
         <div className="mt-16"></div>

src/widgets/SightTabs/RightWidgetTab/SightFramePreview.css

@@ -268,4 +268,3 @@
 .sfp-sight-frame-media-stack.three-d-view {
   background-color: #111 !important;
 }
-