[FEATURE] Cleaned up terminal display

src/components/servers/RconDialog.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import Button from "@mui/material/Button";
@@ -19,22 +19,19 @@ export default function RconDialog(props) {
   const { server, open, dialogToggle } = props;
   const { name: serverName, id: serverId } = server ?? {};
   const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
 
   return (
     <Dialog
-      sx={
-        fullScreen
-          ? {}
-          : { "& .mcl-MuiDialog-paper": { width: "80%", maxHeight: 555 } }
-      }
-      maxWidth="xs"
+      fullWidth
+      maxWidth="lg"
       open={open}
       fullScreen={fullScreen}
+      PaperProps={!fullScreen ? { sx: { height: "60%" } } : undefined}
     >
-      <Toolbar sx={{ display: { sm: "none" } }} />
+      <Toolbar sx={{ display: { md: "none" } }} />
       <DialogTitle>RCON - {serverName}</DialogTitle>
-      <DialogContent>
+      <DialogContent sx={{ height: "100%" }}>
         <RconView serverId={serverId} />
       </DialogContent>
       <DialogActions>

src/components/servers/RconView.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
 import RconSocket from "./RconSocket.js";
 import "@mcl/css/rcon.css";
 
@@ -39,16 +40,27 @@ export default function RconView(props) {
   }
 
   return (
-    <Box>
-      <div className="rconLogsWrapper" ref={logsRef}>
+    <Box sx={{ height: "100%", display: "flex", flexWrap: "wrap" }}>
+      <Box
+        className="rconLogsWrapper"
+        ref={logsRef}
+        style={{
+          padding: "1rem",
+          backgroundColor: "rgba(0,0,0,.815)",
+          color: "white",
+          borderRadius: "4px",
+        }}
+      >
         {logs.map((v, k) => (
           <Box key={k}>
-            {v}
-            <br />
+            <Typography variant="subtitle2">{v}</Typography>
           </Box>
         ))}
-      </div>
-      <Box className="rconActions">
+      </Box>
+      <Box
+        className="rconActions"
+        sx={{ marginTop: "auto", paddingTop: "1rem" }}
+      >
         <TextField
           id="outlined-basic"
           label="Command"

src/css/rcon.css

@@ -1,8 +1,7 @@
 .rconLogsWrapper {
   overflow-y: scroll;
-  max-height: 20rem;
+  max-height: calc(100% - 6rem);
   word-wrap: break-word;
-  margin-bottom: 10px;
 }
 .rconActions {
   display: inline-flex;