Fix token preview rendering for token groups

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) => (
+        {maps
-          <MapImage
+          .slice(0, layout.groupGridColumns * layout.groupGridColumns)
-            sx={{ borderRadius: "8px" }}
+          .map((map) => (
-            map={map}
+            <MapImage
-            key={`${map.id}-group-tile`}
+              sx={{ borderRadius: "8px" }}
-          />
+              map={map}
-        ))}
+              key={`${map.id}-group-tile`}
+            />
+          ))}
       </Grid>
     </Tile>
   );

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}

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}

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) => (
+        {tokens
-          <TokenImage
+          .slice(0, layout.groupGridColumns * layout.groupGridColumns)
-            sx={{ borderRadius: "8px" }}
+          .map((token) => (
-            token={token}
+            <TokenImage
-            key={`${token.id}-group-tile`}
+              sx={{ borderRadius: "8px" }}
-          />
+              token={token}
-        ))}
+              key={`${token.id}-group-tile`}
+            />
+          ))}
       </Grid>
     </Tile>
   );