Fix select tile flow for odd number of elements

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"