Fix scroll and make user friendlier on mobile

client/package.json

@@ -16,6 +16,7 @@
     "luxon": "^3.2.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
     "react-router-bootstrap": "^0.26.2",

client/src/components/availabilities/Meeting.tsx

@@ -9,16 +9,18 @@ import { useGetMeetingQuery } from 'slices/enhancedApi';
 import { getReqErrorMessage } from 'utils/requests.utils';
 import { useGetCurrentMeetingWithSelector } from 'utils/meetings.hooks';
 import { useSelfInfoIsPresent } from 'utils/auth.hooks';
-import { useAppDispatch } from 'app/hooks';
+import {useAppDispatch, useAppSelector} from 'app/hooks';
 import { setCurrentMeetingID } from 'slices/currentMeeting';
 import InfoModal from 'components/InfoModal';
 import { useToast } from 'components/Toast';
-import { resetSelection } from 'slices/availabilitiesSelection';
+import {resetSelection, selectSelMode} from 'slices/availabilitiesSelection';
 import useSetTitle from 'utils/title.hook';
+import {isMobile} from 'react-device-detect';
 
 export default function Meeting() {
   const [isEditingMeeting, setIsEditingMeeting] = useState(false);
   const dispatch = useAppDispatch();
+  const selMode = useAppSelector(selectSelMode);
   const params = useParams();
   const meetingID = params.id;
   const skip = !meetingID;
@@ -69,8 +71,8 @@ export default function Meeting() {
   return (
     <div className="flex-grow-1">
       <MeetingTitleRow setIsEditingMeeting={setIsEditingMeeting} />
-      <MeetingAboutRow />
-      <hr className="my-4 my-md-5" />
+      {(!isMobile || selMode.type === 'none') && <MeetingAboutRow />}
+      <hr className="my-4 my-md-5"/>
       <WeeklyViewTimePicker />
     </div>
   );

client/src/components/availabilities/WeeklyTimeViewPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useReducer } from 'react';
+import React, {useMemo, useReducer, useState} from 'react';
 import { LeftArrow as SVGLeftArrow, RightArrow as SVGRightArrow } from 'components/Arrows';
 import {
   getDateFromString,
@@ -16,6 +16,7 @@ import { assert } from 'utils/misc.utils';
 import { useGetCurrentMeetingWithSelector } from 'utils/meetings.hooks';
 import { useAppSelector } from 'app/hooks';
 import { selectSelMode } from 'slices/availabilitiesSelection';
+import {isMobile} from "react-device-detect";
 
 /**
  * Returns a string which can be used in the CSS grid-template-areas property
@@ -114,6 +115,8 @@ export default function WeeklyViewTimePicker() {
   // As of this writing (2022-10-01), LettuceMeet has this bug as well.
   // !!!!!!!!!!
   // TODO: Need to add an extra day (prior to earliest tentative date) in this scenario.
+  const selMode = useAppSelector(selectSelMode);
+
   const startHour = Math.floor(startTime);
   const endHour = Math.ceil(endTime);
   const [page, pageDispatch] = useReducer(pageNumberReducer, 0);
@@ -152,6 +155,7 @@ export default function WeeklyViewTimePicker() {
               /* Row order: month title, days of week, schedule grid */
               gridTemplateRows: `auto auto repeat(${numRows}, 1.75em)`,
               gridTemplateAreas,
+              touchAction: 'none'
             }}
             className={className}
           >
@@ -169,7 +173,7 @@ export default function WeeklyViewTimePicker() {
             Näytetään paikallisessa aikavyöhykkeessä ({tzAbbr})
           </div>
         </div>
-        <MeetingRespondents />
+        {(!isMobile || selMode.type === 'none') && <MeetingRespondents />}
       </div>
     </>
   );