Adjust DomainTileButton dimensions (#2683)

sillsdev · Oct 10, 2023 · 7037c5c · 7037c5c
1 parent 39518a9
commit 7037c5c
Show file tree

Hide file tree

Showing 4 changed files with 919 additions and 67 deletions.
diff --git a/src/components/TreeView/TreeDepiction/DomainTileButton.tsx b/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"}
     >

diff --git a/src/components/TreeView/TreeDepiction/TreeDepictionTypes.ts b/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;

diff --git a/src/components/TreeView/TreeDepiction/tests/__snapshots__/DomainTileButton.test.tsx.snap b/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%",
     }
   }