fix(planner): prevent overflow in planner module list (#3701)

* Make planner module lists scrollable

* Allow horizontal scrolling on all elements with element shrinking

* Fix capitalisation on courses

* Fix lint issues

* Capitalize "course" for planner year

* Fix scss styles to use prettier

* Ensure consistency in component naming and props

Author: jloh02

website/src/views/planner/PlannerContainer/PlannerContainer.scss

@@ -14,12 +14,17 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  gap: 1rem;
 
-  h1 {
+  .headerLeft {
     display: flex;
     align-items: center;
     margin: 0;
-    font-size: $font-size-xlg;
+
+    h1 {
+      font-size: $font-size-xlg;
+    }
 
     button {
       margin-left: 1rem;
@@ -33,11 +38,21 @@
   .headerRight {
     display: flex;
     align-items: center;
+    width: 100%;
   }
 
   .moduleStats {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     margin-right: 1rem;
+
+    p {
+      white-space: nowrap;
+    }
   }
+
+  @include scrollable;
 }
 
 .addYearButton {
@@ -60,6 +75,9 @@
 
 .moduleLists {
   display: flex;
+  width: 100%;
+
+  @include scrollable;
 }
 
 .modListHeaders {
@@ -71,6 +89,7 @@
 .trash {
   opacity: 0.6;
   width: $semester-width;
+  min-width: $semester-width;
   border: 1px dashed;
   border-radius: 0.4rem;
   text-align: center;

website/src/views/planner/PlannerContainer/PlannerContainer.tsx

@@ -4,7 +4,7 @@ import { flatMap, flatten, sortBy, toPairs, values } from 'lodash';
 import { DragDropContext, Droppable, OnDragEndResponder } from 'react-beautiful-dnd';
 import classnames from 'classnames';
 
-import { Settings, Trash } from 'react-feather';
+import { Trash } from 'react-feather';
 import { Module, ModuleCode, Semester } from 'types/modules';
 import { PlannerModulesWithInfo, PlannerModuleInfo, AddModuleData } from 'types/planner';
 import { MODULE_CODE_REGEX, renderMCs, subtractAcadYear } from 'utils/modules';
@@ -30,6 +30,7 @@ import Title from 'views/components/Title';
 import LoadingSpinner from 'views/components/LoadingSpinner';
 import Modal from 'views/components/Modal';
 import { State as StoreState } from 'types/state';
+import PlannerSettingsButton from '../PlannerSettingsButton';
 import PlannerSemester from '../PlannerSemester';
 import PlannerYear from '../PlannerYear';
 import PlannerSettings from '../PlannerSettings';
@@ -140,29 +141,26 @@ export class PlannerContainerComponent extends PureComponent<Props, State> {
 
     return (
       <header className={styles.header}>
-        <h1>
-          Course Planner{' '}
+        <div className={styles.headerLeft}>
+          <h1>Course Planner </h1>
           <button
             className="btn btn-sm btn-outline-success"
             type="button"
             onClick={this.props.toggleFeedback}
           >
             Beta - Send Feedback
           </button>
-        </h1>
+        </div>
 
         <div className={styles.headerRight}>
-          <p className={styles.moduleStats}>
-            {count} {count === 1 ? 'course' : 'courses'} / {renderMCs(credits)}
-          </p>
+          <div className={styles.moduleStats}>
+            <p>
+              {count} {count === 1 ? 'Course' : 'Courses'}&nbsp;/&nbsp;
+            </p>
+            <p>{renderMCs(credits)}</p>
+          </div>
 
-          <button
-            className="btn btn-svg btn-outline-primary"
-            type="button"
-            onClick={() => this.setState({ showSettings: true })}
-          >
-            <Settings className="svg" /> Settings
-          </button>
+          <PlannerSettingsButton onClick={() => this.setState({ showSettings: true })} />
         </div>
       </header>
     );

website/src/views/planner/PlannerSemester.tsx

@@ -37,7 +37,7 @@ function renderSemesterMeta(plannerModules: PlannerModuleInfo[]) {
   return (
     <div className={styles.semesterMeta}>
       <p>
-        {plannerModules.length} {plannerModules.length === 1 ? 'course' : 'courses'}
+        {plannerModules.length} {plannerModules.length === 1 ? 'Course' : 'Courses'}
       </p>
       <p>{renderMCs(moduleCredits)}</p>
     </div>

website/src/views/planner/PlannerSettingsButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Settings } from 'react-feather';
+import { breakpointDown } from 'utils/css';
+import useMediaQuery from 'views/hooks/useMediaQuery';
+
+type Props = Readonly<{
+  onClick: () => void;
+}>;
+
+const PlannerSettingsButton: React.FC<Props> = ({ onClick }) => {
+  const narrowViewport = useMediaQuery(breakpointDown('sm'));
+
+  return (
+    <button className="btn btn-svg btn-outline-primary" type="button" onClick={onClick}>
+      <Settings className="svg" />
+      {narrowViewport ? '' : 'Settings'}
+    </button>
+  );
+};
+
+export default PlannerSettingsButton;

website/src/views/planner/PlannerYear.tsx

@@ -50,7 +50,7 @@ export default class PlannerYear extends PureComponent<Props, State> {
         </h2>
         <div className={styles.yearMeta}>
           <p>
-            {count} {count === 1 ? 'course' : 'courses'}
+            {count} {count === 1 ? 'Course' : 'Courses'}
           </p>
           <p>{renderMCs(credits)}</p>
         </div>