fix: optimiser tooltip icon wrap

Author: leslieyip02

website/src/views/optimiser/OptimiserForm/OptimiserForm.scss

@@ -29,19 +29,12 @@
 }
 
 .optimiserDescription {
-  display: flex;
-  flex-direction: row;
+  margin: 0;
   margin-bottom: 0.5rem;
-
-  h4 {
-    margin: 0;
-    font-size: medium;
-  }
+  font-size: medium;
 
   @include media-breakpoint-down(xs) {
-    h4 {
-      font-size: small;
-    }
+    font-size: small;
   }
 }
 

website/src/views/optimiser/OptimiserForm/OptimiserFormTooltip.scss

@@ -3,12 +3,11 @@
 .optimiserTooltipIcon {
   composes: svg svg-small from global;
   margin: auto;
-  margin-left: 0.5rem;
+  margin-left: 1ch;
   color: #69707a;
   cursor: pointer;
 
   @include media-breakpoint-down(xs) {
     width: 0.8rem;
-    margin-top: -0.2rem;
   }
 }

website/src/views/optimiser/OptimiserForm/OptimiserFreeDaySelect.tsx

@@ -29,10 +29,10 @@ const OptimiserFreeDaySelect: React.FC<Props> = ({ hasSaturday, optimiserFormFie
 
   return (
     <section className={styles.freeDaysSection}>
-      <span className={styles.optimiserDescription}>
-        <h4>Select days you would like to be free</h4>
+      <h4 className={styles.optimiserDescription}>
+        Select days you would like to be free
         <OptimiserFormTooltip content="Chosen days will have no physical classes" />
-      </span>
+      </h4>
 
       <div className={styles.freeDaysButtons}>
         {days.map((day) => (

website/src/views/optimiser/OptimiserForm/OptimiserLessonOptionSelect.tsx

@@ -32,10 +32,10 @@ const OptimiserLessonOptionSelect: React.FC<Props> = ({ lessonOptions, optimiser
 
   return (
     <section>
-      <span className={styles.optimiserDescription}>
-        <h4>Select lessons you plan to attend live (in person/online)</h4>
+      <h4 className={styles.optimiserDescription}>
+        Select lessons you plan to attend live (in person/online)
         <OptimiserFormTooltip content="Chosen lessons will only be allocated on your school days" />
-      </span>
+      </h4>
 
       {isEmpty(lessonOptions) ? (
         <div className={styles.noLessonsWarning}>

website/src/views/optimiser/OptimiserForm/OptimiserMaxConsecutiveHoursSelect.tsx

@@ -15,10 +15,10 @@ const OptimiserMaxConsecutiveHoursSelect: React.FC<Props> = ({ optimiserFormFiel
 
   return (
     <div className={styles.maxConsecutiveHours}>
-      <span className={styles.optimiserDescription}>
-        <h4>Select maximum consecutive hours of live lessons</h4>
+      <h4 className={styles.optimiserDescription}>
+        Select maximum consecutive hours of live lessons
         <OptimiserFormTooltip content="Prioritises having less than this number of consecutive hours of live lessons" />
-      </span>
+      </h4>
 
       <select
         value={maxConsecutiveHours}

website/src/views/optimiser/OptimiserForm/OptimiserTimeRangeSelect.tsx

@@ -64,10 +64,10 @@ const OptimiserLessonTimeRangeSelect: React.FC<LessonTimeRangeSelectProps> = ({
   return (
     <section className={styles.timeControls}>
       <div className={styles.timeColumn}>
-        <span className={styles.optimiserDescription}>
-          <h4>Earliest start time</h4>
+        <h4 className={styles.optimiserDescription}>
+          Earliest start time
           <OptimiserFormTooltip content="There will be no physical class before this time" />
-        </span>
+        </h4>
 
         <OptimiserTimeRangeSelect
           currentValue={lessonTimeRange.earliest}
@@ -77,10 +77,10 @@ const OptimiserLessonTimeRangeSelect: React.FC<LessonTimeRangeSelectProps> = ({
       </div>
 
       <div className={styles.timeColumn}>
-        <span className={styles.optimiserDescription}>
-          <h4>Latest end time</h4>
+        <h4 className={styles.optimiserDescription}>
+          Latest end time
           <OptimiserFormTooltip content="There will be no physical class after this time" />
-        </span>
+        </h4>
 
         <OptimiserTimeRangeSelect
           currentValue={lessonTimeRange.latest}
@@ -126,10 +126,10 @@ const OptimiserLunchTimeRangeSelect: React.FC<LunchTimeRangeSelectProps> = ({
   return (
     <section className={styles.timeControls}>
       <div className={styles.timeColumn}>
-        <span className={styles.optimiserDescription}>
-          <h4>Select range for preferred lunch break timings</h4>
+        <h4 className={styles.optimiserDescription}>
+          Select range for preferred lunch break timings
           <OptimiserFormTooltip content="Prioritises 1-hour lunch breaks in this range" />
-        </span>
+        </h4>
 
         <div className={styles.timeRow}>
           <OptimiserTimeRangeSelect