Added mobile support to select dice modal and added padding to mobile modals

src/components/dice/DiceTile.js

@@ -1,28 +1,33 @@
 import React from "react";
-import { Flex, Image, Text } from "theme-ui";
+import { Flex, Image, Text, Box } from "theme-ui";
 
-function DiceTile({ dice, isSelected, onDiceSelect, onDone }) {
+function DiceTile({ dice, isSelected, onDiceSelect, onDone, large }) {
   return (
     <Flex
       onClick={() => onDiceSelect(dice)}
       sx={{
-        borderColor: "primary",
-        borderStyle: isSelected ? "solid" : "none",
-        borderWidth: "4px",
         position: "relative",
-        width: "150px",
+        width: large ? "49%" : "32%",
-        height: "150px",
+        height: "0",
+        paddingTop: large ? "49%" : "32%",
         borderRadius: "4px",
         justifyContent: "center",
         alignItems: "center",
         cursor: "pointer",
       }}
-      m={2}
+      my={1}
       bg="muted"
       onDoubleClick={() => onDone(dice)}
     >
       <Image
-        sx={{ width: "100%", height: "100%", objectFit: "contain" }}
+        sx={{
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          position: "absolute",
+          top: 0,
+          left: 0,
+        }}
         src={dice.preview}
       />
       <Flex
@@ -48,6 +53,20 @@ function DiceTile({ dice, isSelected, onDiceSelect, onDone }) {
           {dice.name}
         </Text>
       </Flex>
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          borderColor: "primary",
+          borderStyle: isSelected ? "solid" : "none",
+          borderWidth: "4px",
+          pointerEvents: "none",
+          borderRadius: "4px",
+        }}
+      />
     </Flex>
   );
 }

src/components/dice/DiceTiles.js

@@ -1,19 +1,22 @@
 import React from "react";
 import { Flex } from "theme-ui";
 import SimpleBar from "simplebar-react";
+import { useMedia } from "react-media";
 
 import DiceTile from "./DiceTile";
 
 function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
+  const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
+
   return (
-    <SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
+    <SimpleBar style={{ maxHeight: "300px" }}>
       <Flex
-        py={2}
+        p={2}
         bg="muted"
         sx={{
           flexWrap: "wrap",
-          width: "500px",
           borderRadius: "4px",
+          justifyContent: "space-between",
         }}
       >
         {dice.map((dice) => (
@@ -23,6 +26,7 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
             isSelected={selectedDice && dice.key === selectedDice.key}
             onDiceSelect={onDiceSelect}
             onDone={onDone}
+            large={isSmallScreen}
           />
         ))}
       </Flex>

src/modals/SelectDiceModal.js

@@ -9,7 +9,11 @@ import { dice } from "../dice";
 function SelectDiceModal({ isOpen, onRequestClose, onDone, defaultDice }) {
   const [selectedDice, setSelectedDice] = useState(defaultDice);
   return (
-    <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={{ maxWidth: "542px", width: "calc(100% - 16px)" }}
+    >
       <Flex
         sx={{
           flexDirection: "column",

src/modals/SelectMapModal.js

@@ -275,7 +275,7 @@ function SelectMapModal({
     <Modal
       isOpen={isOpen}
       onRequestClose={handleClose}
-      style={{ maxWidth: "542px", width: "100%" }}
+      style={{ maxWidth: "542px", width: "calc(100% - 16px)" }}
     >
       <ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
         <input

src/modals/SelectTokensModal.js

@@ -134,7 +134,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
     <Modal
       isOpen={isOpen}
       onRequestClose={handleRequestClose}
-      style={{ maxWidth: "542px", width: "100%" }}
+      style={{ maxWidth: "542px", width: "calc(100% - 16px)" }}
     >
       <ImageDrop onDrop={handleImagesUpload} dropText="Drop token to upload">
         <input