From 3611462627749af7cfcda8a43d080c458aff6dc7 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Mon, 12 Aug 2024 19:04:39 -0400
Subject: [PATCH] add box to header

---
 demo/src/Header.tsx | 59 ++++++++++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/demo/src/Header.tsx b/demo/src/Header.tsx
index d838eb49..9ea2ae7b 100644
--- a/demo/src/Header.tsx
+++ b/demo/src/Header.tsx
@@ -3,32 +3,41 @@ import { Box, Link, Typography } from "@mui/material";
 
 export default function Header() {
     return (
-        <Box sx={{ mb: "1rem" }}>
-            <Typography
-                variant="h4"
-                sx={{ fontWeight: "650", color: "black", mb: "0.25rem" }}
-            >
-                MemoryViz Demo
-            </Typography>
-            <Typography variant="body2">
-                Demos of the{" "}
-                <Link
-                    href="https://github.com/david-yz-liu/memory-viz"
-                    target="_blank"
-                    rel="noopener noreferrer"
+        <Box
+            sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                mb: "1rem",
+            }}
+        >
+            <Box>
+                <Typography
+                    variant="h4"
+                    sx={{ fontWeight: "650", color: "black", mb: "0.25rem" }}
                 >
-                    MemoryViz
-                </Link>{" "}
-                Javascript library for visualizing Python memory. Click{" "}
-                <Link
-                    href="https://www.cs.toronto.edu/~david/memory-viz/docs/api/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    here
-                </Link>{" "}
-                for documentation.
-            </Typography>
+                    MemoryViz Demo
+                </Typography>
+                <Typography variant="body2">
+                    Demos of the{" "}
+                    <Link
+                        href="https://github.com/david-yz-liu/memory-viz"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        MemoryViz
+                    </Link>{" "}
+                    Javascript library for visualizing Python memory. Click{" "}
+                    <Link
+                        href="https://www.cs.toronto.edu/~david/memory-viz/docs/api/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        here
+                    </Link>{" "}
+                    for documentation.
+                </Typography>
+            </Box>
+            <Box sx={{ width: "30%", border: "2px solid blue" }}></Box>
         </Box>
     );
 }