-

frontend/src/components/Layout.tsx

@@ -215,23 +215,31 @@ export default function Layout() {
         sx={{
           flexGrow: 1,
           width: {
-            xs: "100%",
-            sm: `calc(100% - ${drawerWidth}px)`,
+            xs: "100vw",
+            sm: `calc(100vw - ${drawerWidth}px)`,
           },
-          minHeight: "100vh",
+          height: "100vh",
           display: "flex",
           flexDirection: "column",
+          overflow: "hidden",
         }}
       >
         {/* Toolbar spacer */}
-        <Toolbar sx={{ minHeight: { xs: 56, sm: 64 } }} />
+        <Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, flexShrink: 0 }} />
 
         {/* Content */}
         <Box
           sx={{
-            flexGrow: 1,
-            p: { xs: 1.5, sm: 2, md: 3 },
-            overflow: "auto",
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0, // Important: allows flex children to shrink below content size
+            p: location.pathname.startsWith("/report-editor")
+              ? 0
+              : { xs: 1.5, sm: 2, md: 3 },
+            overflow: location.pathname.startsWith("/report-editor")
+              ? "hidden"
+              : "auto",
           }}
         >
           <Outlet />

frontend/src/components/reportEditor/EditorCanvas.tsx

@@ -1522,6 +1522,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
         sx={{
           flex: 1,
           overflow: "auto",
+          width: "100%",
           display: "flex",
           justifyContent: "center",
           alignItems: "flex-start",

frontend/src/pages/ReportEditorPage.tsx

@@ -1862,9 +1862,9 @@ export default function ReportEditorPage() {
       sx={{
         display: "flex",
         flexDirection: "column",
-        height: { xs: "calc(100vh - 56px)", sm: "calc(100vh - 64px)" },
-        mx: { xs: -1.5, sm: -2, md: -3 },
-        mt: { xs: -1.5, sm: -2, md: -3 },
+        flex: 1,
+        width: "100%",
+        minHeight: 0, // Important: allows flex container to shrink
         overflow: "hidden",
       }}
     >