Fix dice tile rendering

src/components/dice/DiceTile.js

@@ -5,6 +5,7 @@ import Tile from "../tile/Tile";
 
 function DiceTile({ dice, isSelected, onDiceSelect, onDone }) {
   return (
+    <div style={{ cursor: "pointer" }}>
       <Tile
         title={dice.name}
         isSelected={isSelected}
@@ -13,6 +14,7 @@ function DiceTile({ dice, isSelected, onDiceSelect, onDone }) {
       >
         <Image src={dice.preview}></Image>
       </Tile>
+    </div>
   );
 }
 

src/components/dice/DiceTiles.js

@@ -10,9 +10,7 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
   const layout = useResponsiveLayout();
 
   return (
-    <SimpleBar
-      style={{ height: layout.screenSize === "large" ? "600px" : "400px" }}
-    >
+    <SimpleBar style={{ height: layout.tileContainerHeight }}>
       <Grid
         p={2}
         pb={4}
@@ -22,7 +20,7 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
           minHeight: layout.screenSize === "large" ? "600px" : "400px",
         }}
         gap={2}
-        columns={`repeat${layout.tileGridColumns}, 1fr`}
+        columns={`repeat(${layout.tileGridColumns}, 1fr)`}
       >
         {dice.map((dice) => (
           <DiceTile