Adjust DomainTileButton dimensions

src/components/TreeView/TreeDepiction/DomainTileButton.tsx

@@ -104,6 +104,7 @@ export default function DomainTileButton(
         width: "95%",
         height: "95%",
         margin: "2.5%",
+        padding: "5px",
       }}
       variant={"outlined"}
     >

src/components/TreeView/TreeDepiction/TreeDepictionTypes.ts

@@ -1,8 +1,8 @@
 import { SemanticDomain, SemanticDomainTreeNode } from "api/models";
 
 const MAX_COL_WIDTH = 50; // Max gap.
-const MIN_COL_WIDTH = 30; // Multiply this by RATIO_TILE_TO_GAP for min tile width.
-export const RATIO_TILE_TO_GAP = 3; // Must be odd.
+const MIN_COL_WIDTH = 12; // Multiply this by RATIO_TILE_TO_GAP for min tile width.
+export const RATIO_TILE_TO_GAP = 7; // Must be odd.
 
 export function getNumCols(numChildren: number) {
   return numChildren * (RATIO_TILE_TO_GAP + 1) - 1;

src/components/TreeView/TreeDepiction/tests/__snapshots__/DomainTileButton.test.tsx.snap

@@ -24,6 +24,7 @@ exports[`DomainTileButton renders tile and matches the latest snapshot 1`] = `
       "height": "95%",
       "left": 0,
       "margin": "2.5%",
+      "padding": "5px",
       "width": "95%",
     }
   }