Fixed dice select double click select and scaling

src/components/Tile.js

@@ -55,11 +55,7 @@ function Tile({
         e.stopPropagation();
         onSelect();
       }}
-      onDoubleClick={(e) => {
-        if (canEdit) {
-          onDoubleClick(e);
-        }
-      }}
+      onDoubleClick={onDoubleClick}
     >
       <UIImage
         sx={{

src/components/dice/DiceTile.js

@@ -2,7 +2,7 @@ import React from "react";
 
 import Tile from "../Tile";
 
-function DiceTile({ dice, isSelected, onDiceSelect, onDone, large }) {
+function DiceTile({ dice, isSelected, onDiceSelect, onDone, size }) {
   return (
     <Tile
       src={dice.preview}
@@ -10,7 +10,7 @@ function DiceTile({ dice, isSelected, onDiceSelect, onDone, large }) {
       isSelected={isSelected}
       onSelect={() => onDiceSelect(dice)}
       onDoubleClick={() => onDone(dice)}
-      large={large}
+      size={size}
     />
   );
 }

src/components/dice/DiceTiles.js

@@ -1,21 +1,27 @@
 import React from "react";
 import { Flex } from "theme-ui";
 import SimpleBar from "simplebar-react";
-import { useMedia } from "react-media";
 
 import DiceTile from "./DiceTile";
 
+import useResponsiveLayout from "../../hooks/useResponsiveLayout";
+
 function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
-  const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
+  const layout = useResponsiveLayout();
 
   return (
-    <SimpleBar style={{ maxHeight: "300px" }}>
+    <SimpleBar
+      style={{ height: layout.screenSize === "large" ? "600px" : "400px" }}
+    >
       <Flex
         p={2}
+        pb={4}
         bg="muted"
         sx={{
           flexWrap: "wrap",
           borderRadius: "4px",
+          minHeight: layout.screenSize === "large" ? "600px" : "400px",
+          alignContent: "flex-start",
         }}
       >
         {dice.map((dice) => (
@@ -25,7 +31,7 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
             isSelected={selectedDice && dice.key === selectedDice.key}
             onDiceSelect={onDiceSelect}
             onDone={onDone}
-            large={isSmallScreen}
+            size={layout.tileSize}
           />
         ))}
       </Flex>

src/components/map/MapTile.js

@@ -29,7 +29,7 @@ function MapTile({
       isSelected={isSelected}
       onSelect={() => onMapSelect(map)}
       onEdit={() => onMapEdit(map.id)}
-      onDoubleClick={onDone}
+      onDoubleClick={() => canEdit && onDone()}
       size={size}
       canEdit={canEdit}
       badges={badges}

src/modals/SelectDiceModal.js

@@ -6,13 +6,17 @@ import DiceTiles from "../components/dice/DiceTiles";
 
 import { dice } from "../dice";
 
+import useResponsiveLayout from "../hooks/useResponsiveLayout";
+
 function SelectDiceModal({ isOpen, onRequestClose, onDone, defaultDice }) {
   const [selectedDice, setSelectedDice] = useState(defaultDice);
+  const layout = useResponsiveLayout();
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
-      style={{ maxWidth: "542px", width: "calc(100% - 16px)" }}
+      style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
     >
       <Flex
         sx={{