use stack instead of grid

sc420 · Nov 13, 2023 · 5c97fd8 · 5c97fd8
1 parent 84eb521
commit 5c97fd8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 23 deletions.
diff --git a/interactive-computational-graph/src/components/AddNodesPanel.tsx b/interactive-computational-graph/src/components/AddNodesPanel.tsx
@@ -6,9 +6,9 @@ import {
   AccordionDetails,
   AccordionSummary,
   Button,
-  Grid,
   List,
   ListItem,
+  Stack,
   Typography,
 } from "@mui/material";
 import { type FunctionComponent } from "react";
@@ -39,20 +39,16 @@ const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
   return (
     <>
       {/* Header and toolbar */}
-      <Grid
+      <Stack
+        direction="row"
         alignItems="center"
-        container
         justifyContent="space-between"
         px={2}
         py={0.5}
       >
-        <Grid item>
-          <Typography variant="subtitle1">Add Nodes</Typography>
-        </Grid>
-        <Grid item>
-          <Button startIcon={<EditIcon />}>Edit</Button>
-        </Grid>
-      </Grid>
+        <Typography variant="subtitle1">Add Nodes</Typography>
+        <Button startIcon={<EditIcon />}>Edit</Button>
+      </Stack>
 
       {/* Value nodes */}
       <Accordion defaultExpanded disableGutters square sx={{ width: "100%" }}>

diff --git a/interactive-computational-graph/src/components/ExplainDerivativesPanel.tsx b/interactive-computational-graph/src/components/ExplainDerivativesPanel.tsx
@@ -6,9 +6,9 @@ import {
   AccordionSummary,
   Alert,
   Button,
-  Grid,
   List,
   Snackbar,
+  Stack,
   Typography,
   type AlertColor,
 } from "@mui/material";
@@ -19,9 +19,9 @@ import {
   type SyntheticEvent,
 } from "react";
 import type ExplainDerivativeData from "../features/ExplainDerivativeData";
+import Katex from "../latex/Katex";
 import ExplainDerivativesListItem from "./ExplainDerivativeListItem";
 import ExplainDerivativesHint from "./ExplainDerivativesHint";
-import Katex from "../latex/Katex";
 
 interface ExplainDerivativesPanelProps {
   hasNodes: boolean;
@@ -78,22 +78,18 @@ const ExplainDerivativesPanel: FunctionComponent<
   return (
     <>
       {/* Header and toolbar */}
-      <Grid
+      <Stack
+        direction="row"
         alignItems="center"
-        container
         justifyContent="space-between"
         px={2}
         py={0.5}
       >
-        <Grid item>
-          <Typography variant="subtitle1">Explain Derivatives</Typography>
-        </Grid>
-        <Grid item>
-          <Button startIcon={<ClearIcon />} onClick={onClearSelection}>
-            Clear
-          </Button>
-        </Grid>
-      </Grid>
+        <Typography variant="subtitle1">Explain Derivatives</Typography>
+        <Button startIcon={<ClearIcon />} onClick={onClearSelection}>
+          Clear
+        </Button>
+      </Stack>
 
       {/* Hint */}
       <ExplainDerivativesHint