Fix token preview rendering for token groups

src/components/map/MapTileGroup.js

@@ -19,9 +19,14 @@ 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
+          .slice(0, layout.groupGridColumns * layout.groupGridColumns)
+          .map((map) => (
             <MapImage
               sx={{ borderRadius: "8px" }}
               map={map}

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,9 +25,15 @@ 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
+          .slice(0, layout.groupGridColumns * layout.groupGridColumns)
+          .map((token) => (
             <TokenImage
               sx={{ borderRadius: "8px" }}
               token={token}