Added a larger layout for map and token select and edit

src/components/map/MapEditor.js

@@ -8,6 +8,7 @@ import usePreventOverscroll from "../../helpers/usePreventOverscroll";
 import useStageInteraction from "../../helpers/useStageInteraction";
 import useImageCenter from "../../helpers/useImageCenter";
 import { getMapDefaultInset, getMapMaxZoom } from "../../helpers/map";
+import useResponsiveLayout from "../../helpers/useResponsiveLayout";
 
 import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
 import KeyboardContext from "../../contexts/KeyboardContext";
@@ -104,11 +105,14 @@ function MapEditor({ map, onSettingsChange }) {
     map.grid.inset.topLeft.y !== defaultInset.topLeft.y ||
     map.grid.inset.bottomRight.x !== defaultInset.bottomRight.x ||
     map.grid.inset.bottomRight.y !== defaultInset.bottomRight.y;
+
+  const layout = useResponsiveLayout();
+
   return (
     <Box
       sx={{
         width: "100%",
-        height: "300px",
+        height: layout.screenSize === "large" ? "500px" : "300px",
         cursor: "move",
         touchAction: "none",
         outline: "none",

src/components/map/MapTile.js

@@ -11,7 +11,7 @@ function MapTile({
   onMapSelect,
   onMapEdit,
   onDone,
-  large,
+  size,
   canEdit,
   badges,
 }) {
@@ -34,7 +34,7 @@ function MapTile({
       onSelect={() => onMapSelect(map)}
       onEdit={() => onMapEdit(map.id)}
       onDoubleClick={onDone}
-      large={large}
+      size={size}
       canEdit={canEdit}
       badges={badges}
       editTitle="Edit Map"

src/components/map/MapTiles.js

@@ -1,7 +1,6 @@
 import React, { useContext } from "react";
 import { Flex, Box, Text, IconButton, Close, Label } from "theme-ui";
 import SimpleBar from "simplebar-react";
-import { useMedia } from "react-media";
 import Case from "case";
 
 import RemoveMapIcon from "../../icons/RemoveMapIcon";
@@ -14,6 +13,8 @@ import FilterBar from "../FilterBar";
 
 import DatabaseContext from "../../contexts/DatabaseContext";
 
+import useResponsiveLayout from "../../helpers/useResponsiveLayout";
+
 function MapTiles({
   maps,
   groups,
@@ -32,7 +33,7 @@ function MapTiles({
   onMapsGroup,
 }) {
   const { databaseStatus } = useContext(DatabaseContext);
-  const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
+  const layout = useResponsiveLayout();
 
   let hasMapState = false;
   for (let state of selectedMapStates) {
@@ -61,7 +62,7 @@ function MapTiles({
         onMapSelect={onMapSelect}
         onMapEdit={onMapEdit}
         onDone={onDone}
-        large={isSmallScreen}
+        size={layout.tileSize}
         canEdit={
           isSelected && selectMode === "single" && selectedMaps.length === 1
         }
@@ -83,7 +84,9 @@ function MapTiles({
         onAdd={onMapAdd}
         addTitle="Add Map"
       />
-      <SimpleBar style={{ height: "400px" }}>
+      <SimpleBar
+        style={{ height: layout.screenSize === "large" ? "600px" : "400px" }}
+      >
         <Flex
           p={2}
           pb={4}
@@ -92,7 +95,7 @@ function MapTiles({
           sx={{
             flexWrap: "wrap",
             borderRadius: "4px",
-            minHeight: "400px",
+            minHeight: layout.screenSize === "large" ? "600px" : "400px",
             alignContent: "flex-start",
           }}
           onClick={() => onMapSelect()}