Make the availability picker usable on mobile

src/frontend/src/pages/CalendarPage/Components/EventAvailabilityPage.tsx

@@ -265,17 +265,34 @@ export const EventAvailabilityPage: React.FC = () => {
     <PageLayout
       title={workPackageNames}
       headerRight={
-        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 2,
+            flexDirection: { xs: 'column', sm: 'row' },
+            justifyContent: { xs: 'stretch', sm: 'flex-end' },
+            mb: { xs: 2, md: 0 }
+          }}
+        >
           <NERSuccessButton variant="contained" onClick={() => setEditAvailabilityOpen(true)} disabled={!isUserMember}>
             Edit My Availability
           </NERSuccessButton>
           <NERFailButton onClick={handleClose}>Back to Calendar</NERFailButton>
         </Box>
       }
     >
-      <Box sx={{ display: 'flex', gap: 2, overflow: 'hidden', width: '100%', height: 'calc(100vh - 200px)' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          gap: 2,
+          overflow: 'hidden',
+          width: '100%',
+          height: { xs: 'auto', md: 'calc(100vh - 200px)' }
+        }}
+      >
         {/* Left side - Availability Grid */}
-        <Box sx={{ flex: '1 1 0', minWidth: 0, height: '100%', overflow: 'hidden' }}>
+        <Box sx={{ flex: '1 1 0', minWidth: 0, height: { xs: 420, md: '100%' }, overflow: 'hidden' }}>
           <AvailabilityScheduleView
             availableUsers={availableUsers}
             unavailableUsers={unavailableUsers}
@@ -293,12 +310,12 @@ export const EventAvailabilityPage: React.FC = () => {
         <Box
           sx={{
             flex: '0 0 auto',
-            width: { xs: 180, sm: 220, md: 280 },
+            width: { xs: '100%', md: 280 },
             backgroundColor: theme.palette.background.paper,
             borderRadius: 2,
             p: { xs: 1.5, sm: 2, md: 3 },
             overflowY: 'auto',
-            height: '100%'
+            height: { xs: 'auto', md: '100%' }
           }}
         >
           {/* Date/Time display */}
@@ -334,7 +351,7 @@ export const EventAvailabilityPage: React.FC = () => {
             }
             return (
               <Typography variant="body1" color="text.secondary" mb={3}>
-                Hover over a time slot to see availability
+                {isMobile ? 'Tap a time slot to see availability' : 'Hover over a time slot to see availability'}
               </Typography>
             );
           })()}

src/frontend/src/pages/CalendarPage/Components/EventTimeSlot.tsx

@@ -6,9 +6,9 @@ interface EventTimeSlotProps {
   selected?: boolean;
   allRequiredAvailable?: boolean;
   busy?: boolean;
-  onMouseDown?: (e: React.MouseEvent) => void;
+  onPointerDown?: (e: React.PointerEvent) => void;
   onMouseEnter?: (e: React.MouseEvent) => void;
-  onMouseUp?: () => void;
+  onPointerUp?: () => void;
 }
 
 const EventTimeSlot: React.FC<EventTimeSlotProps> = ({
@@ -17,9 +17,9 @@ const EventTimeSlot: React.FC<EventTimeSlotProps> = ({
   selected = false,
   allRequiredAvailable = false,
   busy = false,
-  onMouseDown,
+  onPointerDown,
   onMouseEnter,
-  onMouseUp
+  onPointerUp
 }) => {
   const getBorderColor = () => {
     if (selected) return '#ffff8c';
@@ -35,13 +35,17 @@ const EventTimeSlot: React.FC<EventTimeSlotProps> = ({
   return (
     <Box
       onClick={onClick}
-      onMouseDown={onMouseDown}
+      onPointerDown={onPointerDown}
       onMouseEnter={onMouseEnter}
-      onMouseUp={onMouseUp}
+      onPointerUp={onPointerUp}
       sx={{
         p: '1px',
         width: '100%',
-        height: '100%'
+        height: '100%',
+        cursor: 'pointer',
+        // kills the tap delay and the grey flash iOS paints over a tapped slot
+        touchAction: 'manipulation',
+        WebkitTapHighlightColor: 'transparent'
       }}
     >
       <Box

src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal.tsx

@@ -2,6 +2,7 @@ import { Availability } from 'shared';
 import NERModal from '../../../../components/NERModal';
 import EditAvailability from './EditAvailability';
 import { Box, useMediaQuery } from '@mui/system';
+import { Typography } from '@mui/material';
 import PageLayout from '../../../../components/PageLayout';
 import NERFailButton from '../../../../components/NERFailButton';
 import NERSuccessButton from '../../../../components/NERSuccessButton';
@@ -38,24 +39,36 @@ const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({
 
   if (isMobile && open) {
     return (
-      <PageLayout title={header}>
-        <EditAvailability
-          editedAvailabilities={confirmedAvailabilities}
-          setEditedAvailabilities={setConfirmedAvailabilities}
-          totalAvailabilities={totalAvailabilities}
-          canChangeDateRange={canChangeDateRange}
-          initialDate={initialDate}
-        />
+      <PageLayout title="Edit Availability" hidePageTitle>
+        {/* the page title styling is far too large for this header sentence on a phone */}
+        <Typography variant="h6" sx={{ fontSize: 18, mt: 2, mb: 1.5 }}>
+          {header}
+        </Typography>
+        {/* leaves room for the fixed action bar below, which would otherwise cover the last row of slots */}
+        <Box sx={{ pb: 'calc(72px + env(safe-area-inset-bottom))' }}>
+          <EditAvailability
+            editedAvailabilities={confirmedAvailabilities}
+            setEditedAvailabilities={setConfirmedAvailabilities}
+            totalAvailabilities={totalAvailabilities}
+            canChangeDateRange={canChangeDateRange}
+            initialDate={initialDate}
+          />
+        </Box>
 
         <Box
           sx={{
             position: 'fixed',
             bottom: 0,
             left: 0,
             right: 0,
-            p: 2,
+            px: 2,
+            pt: 2,
+            pb: 'calc(16px + env(safe-area-inset-bottom))',
             display: 'flex',
             gap: 2,
+            zIndex: 1100, // MUI's app bar layer - keeps the action bar above the grid
+            borderTop: '1px solid',
+            borderColor: 'divider',
             backgroundColor: 'background.paper'
           }}
         >