Cleaned up dice controls and moved to percentage for dice result margins

src/components/dice/DiceButtons.js

@@ -58,6 +58,9 @@ function DiceButtons({
         alignItems: "center",
         flexDirection: "column",
         borderRadius: "4px",
+        position: "absolute",
+        top: "0",
+        left: "0",
       }}
       p={2}
       bg="overlay"

src/components/dice/DiceControls.js

@@ -1,65 +0,0 @@
-import React from "react";
-
-import DiceButtons from "./DiceButtons";
-import DiceResults from "./DiceResults";
-
-function DiceControls({
-  onDiceAdd,
-  onDiceClear,
-  onDiceReroll,
-  onDiceLoad,
-  diceTraySize,
-  onDiceTraySizeChange,
-  shareDice,
-  onShareDiceChage,
-  diceRolls,
-  onDiceRollsChange,
-}) {
-  return (
-    <>
-      <div
-        style={{
-          position: "absolute",
-          bottom: "16px",
-          left: 0,
-          right: 0,
-          display: "flex",
-          color: "white",
-          pointerEvents: "none",
-          transform: "translateX(50px)",
-        }}
-      >
-        <DiceResults
-          diceRolls={diceRolls}
-          onDiceClear={() => {
-            onDiceClear();
-            onDiceRollsChange([]);
-          }}
-          onDiceReroll={onDiceReroll}
-        />
-      </div>
-      <div
-        style={{
-          position: "absolute",
-          top: "0",
-          left: "0",
-        }}
-      >
-        <DiceButtons
-          diceRolls={diceRolls}
-          onDiceAdd={(style, type) => {
-            onDiceAdd(style, type);
-            onDiceRollsChange([...diceRolls, { type, roll: "unknown" }]);
-          }}
-          onDiceLoad={onDiceLoad}
-          onDiceTraySizeChange={onDiceTraySizeChange}
-          diceTraySize={diceTraySize}
-          shareDice={shareDice}
-          onShareDiceChange={onShareDiceChage}
-        />
-      </div>
-    </>
-  );
-}
-
-export default DiceControls;

src/components/dice/DiceResults.js

@@ -34,13 +34,19 @@ function DiceResults({ diceRolls, onDiceClear, onDiceReroll }) {
   return (
     <Flex
       sx={{
-        width: "100%",
         justifyContent: "space-between",
         alignItems: "center",
+        position: "absolute",
+        bottom: "5%",
+        left: 0,
+        right: 0,
+        display: "flex",
+        color: "white",
+        pointerEvents: "none",
       }}
     >
       <IconButton
-        ml="24px"
+        ml="7%"
         title="Clear Dice"
         aria-label="Clear Dice"
         onClick={onDiceClear}
@@ -59,7 +65,6 @@ function DiceResults({ diceRolls, onDiceClear, onDiceReroll }) {
           variant="heading"
           as="h1"
           sx={{ fontSize: 5, userSelect: "none" }}
-          mb={diceRolls.length === 1 ? "24px" : 0}
         >
           {getDiceRollTotal(diceRolls)}
         </Text>
@@ -79,11 +84,11 @@ function DiceResults({ diceRolls, onDiceClear, onDiceReroll }) {
             )}
           </Button>
         ) : (
-          <Flex>{rolls}</Flex>
+          <Flex sx={{ height: "15px" }}>{rolls}</Flex>
         )}
       </Flex>
       <IconButton
-        mr="24px"
+        mr="7%"
         title="Reroll Dice"
         aria-label="Reroll Dice"
         onClick={onDiceReroll}

src/components/dice/DiceTrayOverlay.js

@@ -11,9 +11,10 @@ import { Box } from "theme-ui";
 import environment from "../../dice/environment.dds";
 
 import DiceInteraction from "./DiceInteraction";
-import DiceControls from "./DiceControls";
 import Dice from "../../dice/Dice";
 import LoadingOverlay from "../LoadingOverlay";
+import DiceButtons from "./DiceButtons";
+import DiceResults from "./DiceResults";
 
 import DiceTray from "../../dice/diceTray/DiceTray";
 
@@ -311,18 +312,26 @@ function DiceTrayOverlay({
             sceneInteractionRef.current = false;
           }}
         />
+        <DiceResults
+          diceRolls={diceRolls}
+          onDiceClear={() => {
+            handleDiceClear();
+            onDiceRollsChange([]);
+          }}
+          onDiceReroll={handleDiceReroll}
+        />
       </Box>
-      <DiceControls
+      <DiceButtons
-        onDiceAdd={handleDiceAdd}
-        onDiceClear={handleDiceClear}
-        onDiceReroll={handleDiceReroll}
-        onDiceLoad={handleDiceLoad}
-        diceTraySize={diceTraySize}
-        onDiceTraySizeChange={setDiceTraySize}
-        shareDice={shareDice}
-        onShareDiceChage={onShareDiceChage}
         diceRolls={diceRolls}
-        onDiceRollsChange={onDiceRollsChange}
+        onDiceAdd={(style, type) => {
+          handleDiceAdd(style, type);
+          onDiceRollsChange([...diceRolls, { type, roll: "unknown" }]);
+        }}
+        onDiceLoad={handleDiceLoad}
+        onDiceTraySizeChange={setDiceTraySize}
+        diceTraySize={diceTraySize}
+        shareDice={shareDice}
+        onShareDiceChange={onShareDiceChage}
       />
       {isLoading && (
         <Box