From 1eed2eb15d30e6dde2213e9c5ce92801bdbd4ce4 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sat, 12 Jun 2021 21:25:03 +1000
Subject: [PATCH] Fix token preview rendering for token groups

---
 src/components/map/MapTileGroup.js         | 21 +++++++++++++--------
 src/components/token/TokenBarTokenGroup.js |  9 +++++++--
 src/components/token/TokenImage.js         |  2 +-
 src/components/token/TokenTileGroup.js     | 22 ++++++++++++++--------
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/components/map/MapTileGroup.js b/src/components/map/MapTileGroup.js
index f556844..753fc63 100644
--- a/src/components/map/MapTileGroup.js
+++ b/src/components/map/MapTileGroup.js
@@ -19,15 +19,20 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
       <Grid
         columns={`repeat(${layout.groupGridColumns}, 1fr)`}
         p={2}
-        sx={{ gridGap: 2 }}
+        sx={{
+          gridGap: 2,
+          gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`,
+        }}
       >
-        {maps.slice(0, 9).map((map) => (
-          <MapImage
-            sx={{ borderRadius: "8px" }}
-            map={map}
-            key={`${map.id}-group-tile`}
-          />
-        ))}
+        {maps
+          .slice(0, layout.groupGridColumns * layout.groupGridColumns)
+          .map((map) => (
+            <MapImage
+              sx={{ borderRadius: "8px" }}
+              map={map}
+              key={`${map.id}-group-tile`}
+            />
+          ))}
       </Grid>
     </Tile>
   );
diff --git a/src/components/token/TokenBarTokenGroup.js b/src/components/token/TokenBarTokenGroup.js
index ecfce81..d673ec1 100644
--- a/src/components/token/TokenBarTokenGroup.js
+++ b/src/components/token/TokenBarTokenGroup.js
@@ -70,11 +70,16 @@ function TokenBarTokenGroup({ group, tokens, draggable }) {
     } else {
       return (
         <Grid
-          columns="2fr 2fr"
+          columns="1fr 1fr"
           alt={group.name}
           title={group.name}
           bg="muted"
-          sx={{ borderRadius: "8px", gridGap: "4px", minHeight: "48px" }}
+          sx={{
+            borderRadius: "8px",
+            gridGap: "4px",
+            height: "48px",
+            gridTemplateRows: "1fr 1fr",
+          }}
           p="2px"
           {...listeners}
           {...attributes}
diff --git a/src/components/token/TokenImage.js b/src/components/token/TokenImage.js
index 4b4cf21..44c2a77 100644
--- a/src/components/token/TokenImage.js
+++ b/src/components/token/TokenImage.js
@@ -23,7 +23,7 @@ const TokenImage = React.forwardRef(({ token, ...props }, ref) => {
         <Box
           title={props.alt}
           aria-label={props.alt}
-          sx={{ width: "100%", height: "100%" }}
+          sx={{ width: "100%", height: "100%", minHeight: 0 }}
         >
           <TokenOutlineSVG
             outline={token.outline}
diff --git a/src/components/token/TokenTileGroup.js b/src/components/token/TokenTileGroup.js
index a88978b..dadfcb3 100644
--- 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>
   );