Fix mobile bugs related to resizing and styling

src/common/layouts/Page.tsx

@@ -67,6 +67,9 @@ export function Page({ title, leftSidebar, rightSidebar, mobileSupport, children
         <Flex overflowY="auto" h="100%">
           {smallScreen ? (
             <Swiper
+              style={{
+                width: '100%',
+              }}
               modules={[Pagination]}
               pagination={{
                 clickable: true,
@@ -83,7 +86,9 @@ export function Page({ title, leftSidebar, rightSidebar, mobileSupport, children
               ) : (
                 leftSidebar && <SwiperSlide>{leftSidebar}</SwiperSlide>
               )}
-              <SwiperSlide style={{ overflowY: 'scroll', width: '100vw' }}>{children}</SwiperSlide>
+              <SwiperSlide style={{ overflowY: 'scroll', width: '100%', display: 'flex', justifyContent: 'center' }}>
+                {children}
+              </SwiperSlide>
               {rightSidebar && <SwiperSlide>{rightSidebar}</SwiperSlide>}
             </Swiper>
           ) : (

src/pages/import/components/ImportCalendar.tsx

@@ -6,6 +6,7 @@ import { Box } from '@chakra-ui/layout';
 
 import { Timetable } from 'lib/fetchers';
 import { SavedCourse } from 'lib/hooks/useSavedCourses';
+import { useSmallScreen } from 'lib/hooks/useSmallScreen';
 import { getCurrentTerm } from 'lib/utils/terms';
 
 import { SchedulerCalendar } from 'pages/scheduler/components/SchedulerCalendar';
@@ -14,6 +15,7 @@ import { denormalizeCourseEvents } from 'pages/scheduler/hooks/useTransformedCal
 
 export const ImportCalendar = ({ timetableCourses }: { timetableCourses: Timetable }): JSX.Element => {
   const { courses, term } = timetableCourses;
+  const smallScreen = useSmallScreen();
 
   const parsedCourses: SavedCourse[] = useMemo(
     () =>
@@ -43,7 +45,7 @@ export const ImportCalendar = ({ timetableCourses }: { timetableCourses: Timetab
   );
 
   return (
-    <Box w="100%" px="3" pb="14" h="100%">
+    <Box w="100%" px={smallScreen ? 1 : 3} pb="14" h="100%">
       <SchedulerCalendar term={term || getCurrentTerm()} courseCalendarEvents={calendarEvents} />
     </Box>
   );

src/pages/import/components/TimetableCourseTags.tsx

@@ -0,0 +1,37 @@
+import { Wrap, WrapItem } from '@chakra-ui/react';
+
+import { Term, TimetableCourse } from 'lib/fetchers';
+
+import { NotFound } from 'common/notFound/NotFound';
+
+import { ShareCourseCard } from 'pages/scheduler/components/share/SelectedCoursesCardList';
+
+export function TimetableCourseTags({ courses, term }: { courses: TimetableCourse[]; term: Term }) {
+  return (
+    <Wrap p={5} justify="center">
+      {courses.length > 0 ? (
+        courses.map((course) => {
+          if (course.lecture || course.lab || course.tutorial) {
+            return (
+              <WrapItem key={`${course.subject}${course.code}`}>
+                <ShareCourseCard
+                  lecture={course.lecture && course.lecture[0]}
+                  lab={course.lab && course.lab[0]}
+                  tutorial={course.tutorial && course.tutorial[0]}
+                  term={term}
+                  subject={course.subject}
+                  pid={course.pid}
+                  code={course.code}
+                  color={course.color}
+                />
+              </WrapItem>
+            );
+          }
+          return null;
+        })
+      ) : (
+        <NotFound term={term}> Unable to find saved courses for</NotFound>
+      )}
+    </Wrap>
+  );
+}

src/pages/import/index.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Spinner, VStack, Heading, HStack, Flex, Box, ButtonGroup, Button, Center } from '@chakra-ui/react';
 import { useParams } from 'react-router';
 
-import { Timetable, useGetTimetable } from 'lib/fetchers';
+import { Term, Timetable, TimetableCourse, useGetTimetable } from 'lib/fetchers';
 import { useSmallScreen } from 'lib/hooks/useSmallScreen';
 import { getReadableTerm } from 'lib/utils/terms';
 
@@ -14,44 +14,51 @@ import { Sidebar } from 'common/layouts/sidebar/containers/Sidebar';
 import { ImportCalendar } from './components/ImportCalendar';
 import { TimetableActionButtons } from './components/TimetableActionButtons';
 import { TimetableCourseCard } from './components/TimetableCourseCard';
+import { TimetableCourseTags } from './components/TimetableCourseTags';
 
 export function ImportTimetable(): JSX.Element {
   const { slug } = useParams();
   const smallScreen = useSmallScreen();
 
   const { loading, data } = useGetTimetable({ slug: slug });
+  const [courses, setCourses] = useState<TimetableCourse[]>([]);
+  const [term, setTerm] = useState<Term>('202205');
+
+  useEffect(() => {
+    if (data) {
+      setCourses((data as Timetable).courses);
+      setTerm((data as Timetable).term);
+    }
+  }, [data]);
 
   const left = (
     <>
       <TopBar>Timetable Actions</TopBar>
       <TimetableActionButtons data={data as Timetable} loading={loading} />
+      {smallScreen && <TimetableCourseTags courses={courses} term={term} />}
     </>
   );
 
-  const right = (
+  const right = !smallScreen ? (
     <>
       <TopBar>Included Courses</TopBar>
       <Box h="100%" overflowY="auto" pb="20">
         {!loading && data && (
           <VStack>
-            {(data as Timetable).courses.map((course) => (
-              <TimetableCourseCard course={course} term={(data as Timetable).term} />
+            {courses.map((course) => (
+              <TimetableCourseCard course={course} term={term} />
             ))}
           </VStack>
         )}
       </Box>
     </>
-  );
+  ) : undefined;
 
   const calendarComponent = <ImportCalendar timetableCourses={data as Timetable} />;
   const listView = (
     <Sidebar>
       <VStack pb="60">
-        {!loading &&
-          data &&
-          (data as Timetable).courses.map((course) => (
-            <TimetableCourseCard course={course} term={(data as Timetable).term} />
-          ))}
+        {!loading && data && courses.map((course) => <TimetableCourseCard course={course} term={term} />)}
       </VStack>
     </Sidebar>
   );
@@ -61,27 +68,24 @@ export function ImportTimetable(): JSX.Element {
   return (
     <Page title="View Timetable" leftSidebar={left} rightSidebar={right} mobileSupport>
       {smallScreen ? (
-        <VStack pt={2} w="100%" h="100%" overflow="hidden" flexGrow={1} px="3">
+        <VStack pt={2} w="100%" h="100%" overflow="hidden" flexGrow={1} px={1}>
           <HStack justify="space-between" w="100%">
-            <Heading>{!loading && data ? getReadableTerm((data as Timetable).term) : 'Viewing Timetable'}</Heading>
+            <Heading>{!loading && data ? getReadableTerm(term) : 'Viewing Timetable'}</Heading>
             <ButtonGroup isAttached colorScheme="green">
               <Button isActive={!calendarView} onClick={() => setCalendarView(false)}>
                 List
               </Button>
-              <Button onClick={() => setCalendarView(true)}>Calendar</Button>
+              <Button isActive={calendarView} onClick={() => setCalendarView(true)}>
+                Calendar
+              </Button>
             </ButtonGroup>
           </HStack>
-          <Box w="100%">
-            <TimetableActionButtons loading={loading} data={data as Timetable} />
-          </Box>
           {!loading && data ? calendarView ? calendarComponent : listView : <Spinner size="xl" />}
         </VStack>
       ) : (
         <VStack pt={2} w="100%" height="100%" overflow="hidden" flexGrow={1}>
           <Heading textAlign="center">
-            {!loading && data
-              ? 'Viewing Timetable for ' + getReadableTerm((data as Timetable).term)
-              : 'Viewing Timetable'}
+            {!loading && data ? 'Viewing Timetable for ' + getReadableTerm(term) : 'Viewing Timetable'}
           </Heading>
           <Flex w="100%" height="100%">
             {!loading && data ? (