Added a larger layout for map and token select and edit

src/components/Tile.js

@@ -10,18 +10,37 @@ function Tile({
   onSelect,
   onEdit,
   onDoubleClick,
-  large,
+  size,
   canEdit,
   badges,
   editTitle,
 }) {
+  let width;
+  let margin;
+  switch (size) {
+    case "small":
+      width = "24%";
+      margin = "0.5%";
+      break;
+    case "medium":
+      width = "32%";
+      margin = `${2 / 3}%`;
+      break;
+    case "large":
+      width = "48%";
+      margin = "1%";
+      break;
+    default:
+      width = "32%";
+      margin = `${2 / 3}%`;
+  }
   return (
     <Flex
       sx={{
         position: "relative",
-        width: large ? "48%" : "32%",
+        width: width,
         height: "0",
-        paddingTop: large ? "48%" : "32%",
+        paddingTop: width,
         borderRadius: "4px",
         justifyContent: "center",
         alignItems: "center",
@@ -30,7 +49,7 @@ function Tile({
         userSelect: "none",
       }}
       my={1}
-      mx={`${large ? 1 : 2 / 3}%`}
+      mx={margin}
       bg="muted"
       onClick={(e) => {
         e.stopPropagation();
@@ -126,7 +145,7 @@ Tile.defaultProps = {
   onSelect: () => {},
   onEdit: () => {},
   onDoubleClick: () => {},
-  large: false,
+  size: "medium",
   canEdit: false,
   badges: [],
   editTitle: "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()}

src/components/token/TokenPreview.js

@@ -8,6 +8,7 @@ import usePreventOverscroll from "../../helpers/usePreventOverscroll";
 import useStageInteraction from "../../helpers/useStageInteraction";
 import useDataSource from "../../helpers/useDataSource";
 import useImageCenter from "../../helpers/useImageCenter";
+import useResponsiveLayout from "../../helpers/useResponsiveLayout";
 
 import GridOnIcon from "../../icons/GridOnIcon";
 import GridOffIcon from "../../icons/GridOffIcon";
@@ -78,11 +79,13 @@ function TokenPreview({ token }) {
     1
   );
 
+  const layout = useResponsiveLayout();
+
   return (
     <Box
       sx={{
         width: "100%",
-        height: "300px",
+        height: layout.screenSize === "large" ? "500px" : "300px",
         cursor: "move",
         touchAction: "none",
         outline: "none",

src/components/token/TokenTile.js

@@ -13,7 +13,7 @@ function TokenTile({
   isSelected,
   onTokenSelect,
   onTokenEdit,
-  large,
+  size,
   canEdit,
   badges,
 }) {
@@ -26,7 +26,7 @@ function TokenTile({
       isSelected={isSelected}
       onSelect={() => onTokenSelect(token)}
       onEdit={() => onTokenEdit(token.id)}
-      large={large}
+      size={size}
       canEdit={canEdit}
       badges={badges}
       editTitle="Edit Token"

src/components/token/TokenTiles.js

@@ -15,6 +15,8 @@ import FilterBar from "../FilterBar";
 
 import DatabaseContext from "../../contexts/DatabaseContext";
 
+import useResponsiveLayout from "../../helpers/useResponsiveLayout";
+
 function TokenTiles({
   tokens,
   groups,
@@ -31,7 +33,7 @@ function TokenTiles({
   onTokensHide,
 }) {
   const { databaseStatus } = useContext(DatabaseContext);
-  const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
+  const layout = useResponsiveLayout();
 
   let hasSelectedDefaultToken = selectedTokens.some(
     (token) => token.type === "default"
@@ -47,7 +49,7 @@ function TokenTiles({
         isSelected={isSelected}
         onTokenSelect={onTokenSelect}
         onTokenEdit={onTokenEdit}
-        large={isSmallScreen}
+        size={layout.tileSize}
         canEdit={
           isSelected &&
           token.type !== "default" &&
@@ -87,7 +89,9 @@ function TokenTiles({
         onAdd={onTokenAdd}
         addTitle="Add Token"
       />
-      <SimpleBar style={{ height: "400px" }}>
+      <SimpleBar
+        style={{ height: layout.screenSize === "large" ? "600px" : "400px" }}
+      >
         <Flex
           p={2}
           pb={4}
@@ -96,7 +100,7 @@ function TokenTiles({
           sx={{
             flexWrap: "wrap",
             borderRadius: "4px",
-            minHeight: "400px",
+            minHeight: layout.screenSize === "large" ? "600px" : "400px",
             alignContent: "flex-start",
           }}
           onClick={() => onTokenSelect()}

src/helpers/useResponsiveLayout.js

@@ -0,0 +1,27 @@
+import { useMedia } from "react-media";
+
+function useResponsiveLayout() {
+  const isMediumScreen = useMedia({ query: "(min-width: 500px)" });
+  const isLargeScreen = useMedia({ query: "(min-width: 1500px)" });
+  const screenSize = isLargeScreen
+    ? "large"
+    : isMediumScreen
+    ? "medium"
+    : "small";
+
+  const modalSize = isLargeScreen
+    ? "842px"
+    : isMediumScreen
+    ? "642px"
+    : "500px";
+
+  const tileSize = isLargeScreen
+    ? "small"
+    : isMediumScreen
+    ? "medium"
+    : "large";
+
+  return { screenSize, modalSize, tileSize };
+}
+
+export default useResponsiveLayout;

src/modals/EditMapModal.js

@@ -9,6 +9,7 @@ import MapDataContext from "../contexts/MapDataContext";
 
 import { isEmpty } from "../helpers/shared";
 import { getMapDefaultInset } from "../helpers/map";
+import useResponsiveLayout from "../helpers/useResponsiveLayout";
 
 function EditMapModal({ isOpen, onDone, map, mapState }) {
   const { updateMap, updateMapState } = useContext(MapDataContext);
@@ -98,11 +99,13 @@ function EditMapModal({ isOpen, onDone, map, mapState }) {
 
   const [showMoreSettings, setShowMoreSettings] = useState(true);
 
+  const layout = useResponsiveLayout();
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={handleClose}
-      style={{ maxWidth: "542px", width: "calc(100% - 16px)" }}
+      style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
     >
       <Flex
         sx={{

src/modals/EditTokenModal.js

@@ -8,6 +8,7 @@ import TokenPreview from "../components/token/TokenPreview";
 import TokenDataContext from "../contexts/TokenDataContext";
 
 import { isEmpty } from "../helpers/shared";
+import useResponsiveLayout from "../helpers/useResponsiveLayout";
 
 function EditTokenModal({ isOpen, onDone, token }) {
   const { updateToken } = useContext(TokenDataContext);
@@ -46,12 +47,14 @@ function EditTokenModal({ isOpen, onDone, token }) {
     ...tokenSettingChanges,
   };
 
+  const layout = useResponsiveLayout();
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={handleClose}
       style={{
-        maxWidth: "542px",
+        maxWidth: layout.modalSize,
         width: "calc(100% - 16px)",
       }}
     >

src/modals/SelectMapModal.js

@@ -17,6 +17,7 @@ import useKeyboard from "../helpers/useKeyboard";
 import { resizeImage } from "../helpers/image";
 import { useSearch, useGroup, handleItemSelect } from "../helpers/select";
 import { getMapDefaultInset, getGridSize, gridSizeVaild } from "../helpers/map";
+import useResponsiveLayout from "../helpers/useResponsiveLayout";
 
 import MapDataContext from "../contexts/MapDataContext";
 import AuthContext from "../contexts/AuthContext";
@@ -346,11 +347,13 @@ function SelectMapModal({
     };
   }, []);
 
+  const layout = useResponsiveLayout();
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={handleClose}
-      style={{ maxWidth: "542px", width: "calc(100% - 16px)" }}
+      style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
     >
       <ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
         <input

src/modals/SelectTokensModal.js

@@ -15,6 +15,7 @@ import LoadingOverlay from "../components/LoadingOverlay";
 import blobToBuffer from "../helpers/blobToBuffer";
 import useKeyboard from "../helpers/useKeyboard";
 import { useSearch, useGroup, handleItemSelect } from "../helpers/select";
+import useResponsiveLayout from "../helpers/useResponsiveLayout";
 
 import TokenDataContext from "../contexts/TokenDataContext";
 import AuthContext from "../contexts/AuthContext";
@@ -221,11 +222,13 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
     };
   }, []);
 
+  const layout = useResponsiveLayout();
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
-      style={{ maxWidth: "542px", width: "calc(100% - 16px)" }}
+      style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
     >
       <ImageDrop onDrop={handleImagesUpload} dropText="Drop token to upload">
         <input