Merge pull request #214 from doug-stormtree/revert-213-mobile-scroll-fix

Revert "Mobile scroll fix"
doug-stormtree · Nov 22, 2024 · 724340f · 724340f
2 parents 28c607c + c707de3
commit 724340f
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 17 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -35,7 +35,6 @@ import AboutPage from './components/AboutPage';
 import MobileQuestionMenu from './components/MobileQuestionMenu';
 import MobileQuestionDock from './components/MobileQuestionDock';
 import LeaderboardAdmin from './components/LeaderboardAdmin';
-import { mobileStyle } from './theme/QuestionCardBarTheme';
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -175,11 +174,6 @@ function WebMap() {
         top='2.5rem'
         direction='row'
         //zIndex='-1'
-        display={mobileStyle(
-          // hide map-view on mobile when user is selecting a question-card
-          mobileMenuState === MobileMenuState.SELECT ? 'none' : 'flex',
-          'flex', // desktop style
-        )}
       >
         <MapView
           flex='1'

diff --git a/src/components/MobileQuestionCard.jsx b/src/components/MobileQuestionCard.jsx
@@ -59,7 +59,6 @@ export default function MobileQuestionCard({ question, size, variant, mobileMenu
         overflowY='scroll'
         maxHeight='55vh' // slightly less than the other two tabs because of the subtitle taking up space
         marginTop='10px'
-        display={mobileMenuState === MobileMenuState.EXPANDED_HEADER ? 'inherit' : 'none'}
       >
         {
           question.sections.one.map((list, index) => {
@@ -146,12 +145,9 @@ export default function MobileQuestionCard({ question, size, variant, mobileMenu
       <Image src={question.image} __css={styles.image} />
       <Box __css={styles.content}>
         <IconButton
-          icon={<FiX fontSize='3rem'/>}
+          icon={<FiX />}
           display={mobileMenuState === MobileMenuState.COLLAPSED_HEADER ? 'flex' : 'none'}
-          onClick={(e) => {
-            e.stopPropagation();
-            setMobileMenuState(MobileMenuState.SELECT);
-          }}
+          onClick={() => setMobileMenuState(MobileMenuState.SELECT)}
           position='absolute'
           top='0.6rem'
           right='0.6rem'
@@ -164,7 +160,7 @@ export default function MobileQuestionCard({ question, size, variant, mobileMenu
           zIndex='1001'
         />
         <IconButton
-          icon={<FaAngleDown fontSize='2rem'/>}
+          icon={<FaAngleDown />}
           display={mobileMenuState === MobileMenuState.EXPANDED_HEADER ? 'flex' : 'none'}
           onClick={() => setMobileMenuState(MobileMenuState.COLLAPSED_HEADER)}
           position='absolute'

diff --git a/src/theme/QuestionCardBarTheme.jsx b/src/theme/QuestionCardBarTheme.jsx
@@ -84,10 +84,6 @@ const QuestionCardBarTheme = helpers.defineMultiStyleConfig({
       zIndex:'9',
       pointerEvents: 'none',
       background: mobileStyle('none', containerGradient),
-
-      // From https://stackoverflow.com/a/7896882, static position is required to fix scrolling on mobile.
-      pos: mobileStyle('static', 'inherit'),
-      WebkitOverflowScrolling: mobileStyle('touch', 'inherit'),
     }
   },
   defaultProps: {},