👌 Improve modal layout for mobile/tablets, adjust overflowScrolling i…

…nside modal

package.json

@@ -16,6 +16,7 @@
     "react-highlight-words": "^0.18.0",
     "react-loader-spinner": "^5.3.4",
     "react-modal": "^3.16.1",
+    "react-responsive": "^9.0.2",
     "react-switch": "^7.0.0",
     "rodal": "^2.0.1",
     "subscriptions-transport-ws": "^0.11.0"

src/components/creature/spells/SpellModal.js

@@ -1,9 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useEffect } from 'react';
 import Modal from 'react-modal';
 import { Triangle } from 'react-loader-spinner';
+import { useMediaQuery } from 'react-responsive';
 
 import DescriptionHighlight from '../DescriptionHighlight';
-import { spellIcon, spellIconBackground, spellModalStyle } from './utils';
+import {
+  spellIcon, spellIconBackground, spellModalStyle, spellModalStyleMobile, spellModalStyleWeb,
+} from './utils';
 
 const BASE_API_URL = 'https://www.dnd5eapi.co';
 
@@ -15,12 +19,13 @@ export default function SpellModal({
   const [loading, setLoading] = React.useState(false);
   const [spellInfo, setSpellInfo] = React.useState(null);
 
+  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 });
+
   useEffect(() => {
     setLoading(true);
     fetch(`${BASE_API_URL}${currentSpell.url}`, { 'Content-Type': 'application/json' })
       .then((response) => response.json())
       .then((data) => {
-        console.log('res', data);
         setSpellInfo(data);
       })
       .catch((error) => {
@@ -146,7 +151,8 @@ export default function SpellModal({
   console.log('spellInfo', spellInfo);
   return (
     <Modal
-      style={spellModalStyle}
+      // eslint-disable-next-line max-len
+      style={{ content: { ...spellModalStyle.content, ...(isTabletOrMobile ? spellModalStyleMobile.content : spellModalStyleWeb.content) } }}
       isOpen={visible}
       contentLabel="Minimal Modal Example"
       onRequestClose={onClose}

src/components/creature/spells/utils.js

@@ -17,20 +17,28 @@ export const spellModalStyle = {
     bottom: 'auto',
     marginRight: '-50%',
     transform: 'translate(-50%, -50%)',
-    width: '55%',
-    height: '55%',
     backgroundColor: '#FDF1DC',
     borderRadius: '20px',
     boxShadow: '0px 1px 18px -4px rgba(117,74,50,0.98)',
+    WebkitOverflowScrolling: 'touch',
+    overflowScrolling: 'touch',
     '-webkit-box-shadow': '0px 1px 18px -4px rgba(117,74,50,0.98)',
     '-moz-box-shadow': '0px 1px 18px -4px rgba(117,74,50,0.98)',
   },
-  // '@media (max-width: 500px)': {
-  //   content: {
-  //     width: '90%',
-  //     height: '70%',
-  //   },
-  // },
+};
+
+export const spellModalStyleWeb = {
+  content: {
+    width: '55%',
+    height: '55%',
+  },
+};
+
+export const spellModalStyleMobile = {
+  content: {
+    width: '80%',
+    height: '60%',
+  },
 };
 
 export const spellIconBackground = (school) => {