From f05df0659dbf4a65e37efdac2867521303f78547 Mon Sep 17 00:00:00 2001
From: Snarling <84951833+Snarling@users.noreply.github.com>
Date: Sat, 23 Apr 2022 16:48:48 -0400
Subject: [PATCH] Improve tail window buttons

---
 src/ui/React/LogBoxManager.tsx | 35 +++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx
index da20bb32e..44a35c9b7 100644
--- a/src/ui/React/LogBoxManager.tsx
+++ b/src/ui/React/LogBoxManager.tsx
@@ -96,6 +96,9 @@ const useStyles = makeStyles((theme: Theme) =>
       display: "flex",
       flexDirection: "column-reverse",
     },
+    titleButton: {
+      padding: "1px 6px",
+    },
     success: {
       color: theme.colors.success,
     },
@@ -260,28 +263,26 @@ function LogWindow(props: IProps): React.ReactElement {
             }}
           >
             <Box className="drag" display="flex" alignItems="center" ref={draggableRef}>
-              <Typography color="primary" variant="h6" title={title(true)}>
+              <Typography color="primary" variant="h6" sx={{ marginRight: "auto" }} title={title(true)}>
                 {title()}
               </Typography>
 
-              <Box position="absolute" right={0}>
-                {!workerScripts.has(script.pid) && (
-                  <Button onClick={run} onTouchEnd={run}>
-                    Run
-                  </Button>
-                )}
-                {workerScripts.has(script.pid) && (
-                  <Button onClick={kill} onTouchEnd={kill}>
-                    Kill
-                  </Button>
-                )}
-                <Button onClick={minimize} onTouchEnd={minimize}>
-                  {minimized ? "\u{1F5D6}" : "\u{1F5D5}"}
+              {!workerScripts.has(script.pid) && (
+                <Button className={classes.titleButton} onClick={run} onTouchEnd={run}>
+                  Run
                 </Button>
-                <Button onClick={props.onClose} onTouchEnd={props.onClose}>
-                  Close
+              )}
+              {workerScripts.has(script.pid) && (
+                <Button className={classes.titleButton} onClick={kill} onTouchEnd={kill}>
+                  Kill
                 </Button>
-              </Box>
+              )}
+              <Button className={classes.titleButton} onClick={minimize} onTouchEnd={minimize}>
+                {minimized ? "\u{1F5D6}" : "\u{1F5D5}"}
+              </Button>
+              <Button className={classes.titleButton} onClick={props.onClose} onTouchEnd={props.onClose}>
+                Close
+              </Button>
             </Box>
           </Paper>
           <Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-wrap" }}>