Add animation to group open

src/components/token/TokenBar.js

@@ -57,7 +57,7 @@ function TokenBar({ onMapTokenStateCreate }) {
           height: "100%",
           width: "80px",
           minWidth: "80px",
-          overflowY: "scroll",
+          overflowY: "hidden",
           overflowX: "hidden",
           display: fullScreen ? "none" : "block",
         }}

src/components/token/TokenTileGroup.js

@@ -23,12 +23,12 @@ function TokenTileGroup({
       onDoubleClick={onDoubleClick}
       columns="1fr 1fr"
     >
-      <Grid columns={layout.gridTemplate} p={2} sx={{ gridGap: 2 }}>
+      <Grid columns={layout.groupGridTemplate} p={2} sx={{ gridGap: 2 }}>
         {tokens.slice(0, 16).map((token) => (
           <TokenTileImage
             sx={{ borderRadius: "8px" }}
             token={token}
-            key={token.id}
+            key={`${token.id}-group-tile`}
           />
         ))}
       </Grid>

src/components/token/TokenTiles.js

@@ -13,6 +13,7 @@ function TokenTiles({ tokens, onTokenEdit, subgroup }) {
   const {
     groups,
     selectedGroupIds,
+    openGroupId,
     openGroupItems,
     selectMode,
     onGroupOpen,
@@ -68,6 +69,7 @@ function TokenTiles({ tokens, onTokenEdit, subgroup }) {
       renderTile={renderTile}
       onTileSelect={onGroupSelect}
       disableGrouping={subgroup}
+      openGroupId={openGroupId}
     />
   );
 }