Make children of uniform width

Author: imnasnainaec

src/components/TreeView/TreeDepiction/ChildrenRow.tsx

@@ -147,14 +147,15 @@ export default function ChildrenRow(props: TreeRowProps): ReactElement {
       <Grid2 container justifyContent="center">
         {braceRow()}
       </Grid2>
-      <Grid2 container justifyContent="center" spacing={2}>
+      <Grid2 container spacing={2}>
         {props.currentDomain.children.map((child) => (
-          <DomainTileButton
-            direction={Direction.Down}
-            domain={child}
-            key={child.id}
-            onClick={(d) => props.animate(d)}
-          />
+          <Grid2 key={child.id} size={{ xs: 4, sm: 3, md: 2 }}>
+            <DomainTileButton
+              direction={Direction.Down}
+              domain={child}
+              onClick={(d) => props.animate(d)}
+            />
+          </Grid2>
         ))}
       </Grid2>
     </>

src/components/TreeView/TreeDepiction/DomainTileButton.tsx

@@ -96,6 +96,7 @@ export default function DomainTileButton(
         height: "95%",
         insetInlineStart: 0,
         padding: "5px",
+        width: "95%",
       }}
       tabIndex={-1}
       variant={"outlined"}

src/components/TreeView/TreeDepiction/index.tsx

@@ -13,7 +13,7 @@ import { parent } from "resources/tree";
 import { useWindowSize } from "utilities/useWindowSize";
 
 export default function TreeDepiction(props: TreeDepictionProps): ReactElement {
-  const showTree = useMediaQuery<Theme>((th) => th.breakpoints.up("sm"));
+  const showTree = true; //useMediaQuery<Theme>((th) => th.breakpoints.up("sm"));
 
   const [colWidth, setColWidth] = useState(0);