From 334afadfe209bfa7d2f43d2419b357fd48e040c5 Mon Sep 17 00:00:00 2001
From: yoonie-jang <yoonie.jang@mail.utoronto.ca>
Date: Mon, 12 Aug 2024 17:47:32 -0400
Subject: [PATCH] fix button layout at bottom

---
 demo/src/MemoryModelsUserInput.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx
index 20adfb41..fa1d4613 100644
--- a/demo/src/MemoryModelsUserInput.tsx
+++ b/demo/src/MemoryModelsUserInput.tsx
@@ -4,6 +4,7 @@ import {
     AccordionDetails,
     AccordionSummary,
     Button,
+    Box,
     Card,
     CardContent,
     Checkbox,
@@ -206,10 +207,15 @@ export default function MemoryModelsUserInput(
                 setTextData={props.setTextData}
             />
             <Tooltip title="Input JSON to draw diagram">
-                <span>
+                <Box
+                    sx={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                    }}
+                >
                     <DownloadJSONButton
                         jsonResult={props.jsonResult}
-                        sx={{ width: "33.33%" }}
+                        sx={{ width: "40%" }}
                     />
                     <Button
                         type="submit"
@@ -217,11 +223,11 @@ export default function MemoryModelsUserInput(
                         variant="contained"
                         color="primary"
                         disabled={!props.textData}
-                        style={{ textTransform: "none" }}
+                        style={{ width: "auto", textTransform: "none" }}
                     >
                         Draw Diagram
                     </Button>
-                </span>
+                </Box>
             </Tooltip>
         </form>
     );