Fix token preview rendering for token groups

2021-06-12 21:25:03 +10:00
parent 359be5373b
commit 1eed2eb15d
4 changed files with 35 additions and 19 deletions
--- a/src/components/token/TokenTileGroup.js
+++ b/src/components/token/TokenTileGroup.js
@@ -25,15 +25,21 @@ function TokenTileGroup({
      <Grid
        columns={`repeat(${layout.groupGridColumns}, 1fr)`}
        p={2}
-        sx={{ gridGap: 2 }}
+        sx={{
+          gridGap: 2,
+          height: "100%",
+          gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`,
+        }}
      >
-        {tokens.slice(0, 9).map((token) => (
-          <TokenImage
-            sx={{ borderRadius: "8px" }}
-            token={token}
-            key={`${token.id}-group-tile`}
-          />
-        ))}
+        {tokens
+          .slice(0, layout.groupGridColumns * layout.groupGridColumns)
+          .map((token) => (
+            <TokenImage
+              sx={{ borderRadius: "8px" }}
+              token={token}
+              key={`${token.id}-group-tile`}
+            />
+          ))}
      </Grid>
    </Tile>
  );