Added dice tray resizing to match screen size

src/components/map/MapDice.js

@@ -13,6 +13,7 @@ function MapDice() {
         position: "absolute",
         top: 0,
         left: 0,
+        bottom: 0,
         flexDirection: "column",
         alignItems: "flex-start",
       }}

src/components/map/dice/DiceButtons.js

@@ -24,7 +24,7 @@ function DiceButtons({ diceRolls, onDiceAdd }) {
   }
 
   return (
-    <Flex>
+    <Flex sx={{ justifyContent: "center", flexWrap: "wrap", width: "100%" }}>
       <DiceButton
         title="Add D20"
         count={diceCounts.d20}

src/components/map/dice/DiceControls.js

@@ -102,8 +102,7 @@ function DiceControls({
         style={{
           position: "absolute",
           top: "24px",
-          left: "50%",
-          transform: "translateX(-50%)",
+          width: "100%",
         }}
       >
         <DiceButtons

src/components/map/dice/DiceScene.js

@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from "react";
 import * as BABYLON from "babylonjs";
 import * as AMMO from "ammo.js";
 import "babylonjs-loaders";
+import ReactResizeDetector from "react-resize-detector";
 
 function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
   const sceneRef = useRef();
@@ -25,7 +26,7 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
 
     let camera = new BABYLON.TargetCamera(
       "camera",
-      new BABYLON.Vector3(0, 27, 0),
+      new BABYLON.Vector3(0, 34, 0),
       scene
     );
     camera.fov = 0.65;
@@ -54,20 +55,6 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
         selectedMeshDeltaPositionRef.current = delta;
       }
     });
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      engine.resize();
-      for (let entry of entries) {
-        canvasRef.current.width = entry.contentRect.width;
-        canvasRef.current.height = entry.contentRect.height;
-      }
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
   }, [onSceneMount]);
 
   const selectedMeshRef = useRef();
@@ -110,16 +97,30 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
     onPointerUp();
   }
 
+  function handleResize(width, height) {
+    const engine = engineRef.current;
+    engine.resize();
+    canvasRef.current.width = width;
+    canvasRef.current.height = height;
+  }
+
   return (
     <div
-      style={{ width: "100%", height: "100%", overflow: "hidden" }}
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        overflow: "hidden",
+      }}
       ref={containerRef}
     >
-      <canvas
-        onPointerDown={handlePointerDown}
-        onPointerUp={handlePointerUp}
-        ref={canvasRef}
-      />
+      <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+        <canvas
+          onPointerDown={handlePointerDown}
+          onPointerUp={handlePointerUp}
+          ref={canvasRef}
+        />
+      </ReactResizeDetector>
     </div>
   );
 }

src/components/map/dice/DiceTray.js

@@ -218,8 +218,9 @@ function DiceTray({ isOpen }) {
   return (
     <Box
       sx={{
-        width: "300px",
-        height: "600px",
+        width: "500px",
+        maxWidth: "calc(50vh - 48px)",
+        paddingBottom: "200%",
         borderRadius: "4px",
         display: isOpen ? "block" : "none",
         position: "relative",

src/dice/diceTray/DiceTrayMesh.js

@@ -6,7 +6,7 @@ import albedo from "./albedo.jpg";
 import metalRoughness from "./metalRoughness.jpg";
 import normal from "./normal.jpg";
 
-export const diceTraySize = { width: 8, height: 16 };
+export const diceTraySize = { width: 10, height: 20 };
 
 export default async function createDiceTray(scene, shadowGenerator) {
   let mesh = (