Move token bar to use grid over flex

src/components/token/TokenBar.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { createPortal } from "react-dom";
-import { Box, Flex } from "theme-ui";
+import { Box, Flex, Grid } from "theme-ui";
 import SimpleBar from "simplebar-react";
 import {
   DragOverlay,
@@ -165,9 +165,9 @@ function TokenBar({ onMapTokensStateCreate }) {
             padding: "0 16px",
           }}
         >
-          <Flex sx={{ flexDirection: "column" }}>
+          <Grid columns="1fr" gap={2} py={2}>
             {tokenGroups.map((group) => renderToken(group))}
-          </Flex>
+          </Grid>
         </SimpleBar>
         <Flex
           bg="muted"

src/components/token/TokenBarTokenGroup.js

@@ -41,8 +41,9 @@ function TokenBarTokenGroup({ group, tokens, draggable }) {
         <Grid
           columns="1fr"
           bg="muted"
-          sx={{ borderRadius: "8px", gridGap: 0 }}
+          sx={{ borderRadius: "8px" }}
           p={0}
+          gap={2}
         >
           <Flex
             sx={{

src/components/token/TokenTileGroup.js

@@ -25,8 +25,8 @@ function TokenTileGroup({
       <Grid
         columns={`repeat(${layout.groupGridColumns}, 1fr)`}
         p={2}
+        gap={2}
         sx={{
-          gridGap: 2,
           height: "100%",
           gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`,
         }}