fix button layout at bottom

david-yz-liu · Aug 12, 2024 · 334afad · 334afad
1 parent 96e559a
commit 334afad
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx
@@ -4,6 +4,7 @@ import {
     AccordionDetails,
     AccordionSummary,
     Button,
+    Box,
     Card,
     CardContent,
     Checkbox,
@@ -206,22 +207,27 @@ 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"
                         data-testid="input-submit-button"
                         variant="contained"
                         color="primary"
                         disabled={!props.textData}
-                        style={{ textTransform: "none" }}
+                        style={{ width: "auto", textTransform: "none" }}
                     >
                         Draw Diagram
                     </Button>
-                </span>
+                </Box>
             </Tooltip>
         </form>
     );