From 36351efb82d06368ae27086d8812cf5bb38ed854 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Tue, 8 Sep 2020 14:26:38 +1000
Subject: [PATCH] Fix select tile flow for odd number of elements

---
 src/components/dice/DiceTile.js    | 5 +++--
 src/components/dice/DiceTiles.js   | 1 -
 src/components/map/MapTile.js      | 5 +++--
 src/components/map/MapTiles.js     | 6 +++---
 src/components/token/TokenTile.js  | 5 +++--
 src/components/token/TokenTiles.js | 6 +++---
 6 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/dice/DiceTile.js b/src/components/dice/DiceTile.js
index 70991d5..7cf26d3 100644
--- a/src/components/dice/DiceTile.js
+++ b/src/components/dice/DiceTile.js
@@ -7,15 +7,16 @@ function DiceTile({ dice, isSelected, onDiceSelect, onDone, large }) {
       onClick={() => onDiceSelect(dice)}
       sx={{
         position: "relative",
-        width: large ? "49%" : "32%",
+        width: large ? "48%" : "32%",
         height: "0",
-        paddingTop: large ? "49%" : "32%",
+        paddingTop: large ? "48%" : "32%",
         borderRadius: "4px",
         justifyContent: "center",
         alignItems: "center",
         cursor: "pointer",
       }}
       my={1}
+      mx={`${large ? 1 : 2 / 3}%`}
       bg="muted"
       onDoubleClick={() => onDone(dice)}
     >
diff --git a/src/components/dice/DiceTiles.js b/src/components/dice/DiceTiles.js
index 4a6f8b1..92cd598 100644
--- a/src/components/dice/DiceTiles.js
+++ b/src/components/dice/DiceTiles.js
@@ -16,7 +16,6 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
         sx={{
           flexWrap: "wrap",
           borderRadius: "4px",
-          justifyContent: "space-between",
         }}
       >
         {dice.map((dice) => (
diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.js
index 9d274bb..4c130b3 100644
--- a/src/components/map/MapTile.js
+++ b/src/components/map/MapTile.js
@@ -98,9 +98,9 @@ function MapTile({
       key={map.id}
       sx={{
         position: "relative",
-        width: large ? "49%" : "32%",
+        width: large ? "48%" : "32%",
         height: "0",
-        paddingTop: large ? "49%" : "32%",
+        paddingTop: large ? "48%" : "32%",
         borderRadius: "4px",
         justifyContent: "center",
         alignItems: "center",
@@ -108,6 +108,7 @@ function MapTile({
         overflow: "hidden",
       }}
       my={1}
+      mx={`${large ? 1 : 2 / 3}%`}
       bg="muted"
       onClick={(e) => {
         e.stopPropagation();
diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js
index f44272f..6bec907 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.js
@@ -32,7 +32,6 @@ function MapTiles({
           sx={{
             flexWrap: "wrap",
             borderRadius: "4px",
-            justifyContent: "space-between",
           }}
           onClick={() => onMapSelect(null)}
         >
@@ -48,14 +47,15 @@ function MapTiles({
               ":active": {
                 color: "secondary",
               },
-              width: isSmallScreen ? "49%" : "32%",
+              width: isSmallScreen ? "48%" : "32%",
               height: "0",
-              paddingTop: isSmallScreen ? "49%" : "32%",
+              paddingTop: isSmallScreen ? "48%" : "32%",
               borderRadius: "4px",
               position: "relative",
               cursor: "pointer",
             }}
             my={1}
+            mx={`${isSmallScreen ? 1 : 2 / 3}%`}
             bg="muted"
             aria-label="Add Map"
             title="Add Map"
diff --git a/src/components/token/TokenTile.js b/src/components/token/TokenTile.js
index 0518d66..35f3dd0 100644
--- a/src/components/token/TokenTile.js
+++ b/src/components/token/TokenTile.js
@@ -18,9 +18,9 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove, large }) {
       onClick={() => onTokenSelect(token)}
       sx={{
         position: "relative",
-        width: large ? "49%" : "32%",
+        width: large ? "48%" : "32%",
         height: "0",
-        paddingTop: large ? "49%" : "32%",
+        paddingTop: large ? "48%" : "32%",
         borderRadius: "4px",
         justifyContent: "center",
         alignItems: "center",
@@ -28,6 +28,7 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove, large }) {
         overflow: "hidden",
       }}
       my={1}
+      mx={`${large ? 1 : 2 / 3}%`}
       bg="muted"
     >
       <Image
diff --git a/src/components/token/TokenTiles.js b/src/components/token/TokenTiles.js
index d83990a..00fae0a 100644
--- a/src/components/token/TokenTiles.js
+++ b/src/components/token/TokenTiles.js
@@ -29,7 +29,6 @@ function TokenTiles({
           sx={{
             flexWrap: "wrap",
             borderRadius: "4px",
-            justifyContent: "space-between",
           }}
         >
           <Box
@@ -44,14 +43,15 @@ function TokenTiles({
               ":active": {
                 color: "secondary",
               },
-              width: isSmallScreen ? "49%" : "32%",
+              width: isSmallScreen ? "48%" : "32%",
               height: "0",
-              paddingTop: isSmallScreen ? "49%" : "32%",
+              paddingTop: isSmallScreen ? "48%" : "32%",
               borderRadius: "4px",
               position: "relative",
               cursor: "pointer",
             }}
             my={1}
+            mx={`${isSmallScreen ? 1 : 2 / 3}%`}
             bg="muted"
             aria-label="Add Token"
             title="Add Token"