u

src/main.jsx

@@ -1,5 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import { lazy, Suspense } from 'react';
+import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { Provider } from 'react-redux';
@@ -43,12 +44,18 @@ createRoot(document.getElementById('root')).render(
       >
         <StorageManagerProvider>
           <AuthBootstrap>
-            <App />
-            {AutomatInspector ? (
-              <Suspense fallback={null}>
-                <AutomatInspector />
-              </Suspense>
-            ) : null}
+            {/* Flex row so the dev inspector docks beside the app instead of
+                overlaying it; the app content shrinks while the panel is open. */}
+            <Box sx={{ display: 'flex', alignItems: 'flex-start', minHeight: '100vh' }}>
+              <Box sx={{ flexGrow: 1, minWidth: 0 }}>
+                <App />
+              </Box>
+              {AutomatInspector ? (
+                <Suspense fallback={null}>
+                  <AutomatInspector />
+                </Suspense>
+              ) : null}
+            </Box>
           </AuthBootstrap>
         </StorageManagerProvider>
       </SnackbarProvider>