fix some bugs

src/ui/React/AlertManager.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { EventEmitter } from "../../utils/EventEmitter";
 import { Modal } from "../../ui/React/Modal";
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 export const AlertEvents = new EventEmitter<[string | JSX.Element]>();
 
@@ -41,7 +42,9 @@ export function AlertManager(): React.ReactElement {
     <>
       {alerts.length > 0 && (
         <Modal open={true} onClose={close}>
-          <Typography>{alerts[0].text}</Typography>
+          <Box>
+            <Typography>{alerts[0].text}</Typography>
+          </Box>
         </Modal>
       )}
     </>

src/ui/React/DialogBox.tsx

@@ -6,6 +6,6 @@ export function dialogBoxCreate(txt: string | JSX.Element): void {
   if (typeof txt !== "string") {
     AlertEvents.emit(txt);
   } else {
-    AlertEvents.emit(<pre dangerouslySetInnerHTML={{ __html: txt }} />);
+    AlertEvents.emit(<span dangerouslySetInnerHTML={{ __html: txt }} />);
   }
 }

src/ui/React/LogBoxManager.tsx

@@ -147,10 +147,10 @@ function LogWindow(props: IProps): React.ReactElement {
         </Box>
       </Paper>
       <Paper>
-        <Box maxHeight="25vh" overflow="scroll">
+        <Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word" }}>
           {props.script.logs.map(
             (line: string, i: number): JSX.Element => (
-              <Typography key={i} style={{ whiteSpace: "pre-line" }}>
+              <Typography key={i}>
                 {line}
                 <br />
               </Typography>