test

src/common.tsx

@@ -17,8 +17,7 @@ import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import { Permission } from "./actions";
 import TerminalComponent from "./terminal";
-import ReactDOM, { render } from "react-dom";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom/client";
 
 export const apiAuthenticatedContext: Context<[boolean, Dispatch<boolean>]> = createContext([false, (value: boolean) => {}] as [boolean, Dispatch<boolean>])
 
@@ -268,31 +267,18 @@ export function ActionItem(p: { action: ActionInfo, identifierSubstring?: string
     function openTerminalWindow(websocketUrl: string) {
         const terminalWindow = window.open('', '', 'width=800,height=600');
         if (terminalWindow) {
-            terminalWindow.document.write('<div id="terminal-root" style="width:100%; height:100%"/>');
+            terminalWindow.document.write('<div id="root"/>');
             terminalWindow.document.title = "Terminal";
 
             var terminal_root = terminalWindow.document.getElementById('terminal-root')!
-            
-            createRoot(terminal_root!).render(<TerminalComponent websocket={websocketUrl} />);
-
-            const style = terminalWindow.document.createElement('style');
-            style.innerHTML = `
-                html, body {
-                    width: 100%;
-                    height: 100%;
-                    margin: 0;
-                    padding: 0;
-                    overflow: hidden;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                }
-            `;
-            terminalWindow.document.head.appendChild(style);
-
-            // Fit the terminal to the new window
-            terminal_root.style.width = '100%';
-            terminal_root.style.height = '100%';
+            const root = ReactDOM.createRoot(
+                document.getElementById('root') as HTMLElement
+              );
+            root.render(
+                <React.StrictMode>
+                    <TerminalComponent websocket={websocketUrl} />
+                </React.StrictMode>
+            );
         }
 
     }

src/index.tsx

@@ -16,4 +16,4 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// reportWebVitals();