fix(planner): wrap header and center planner settings button cogwheel (#3704)

* Fix course planner header

* Centralize planning center button cogwheel

* Allow more flexible layout for planner header

* Add gap between planner header parts

---------

Co-authored-by: Kok Rui Wong <[email protected]>

Author: jloh02

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

@@ -12,17 +12,18 @@
 
 .header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   width: 100%;
   gap: 1rem;
 
   .headerLeft {
     display: flex;
+    flex: 1;
     align-items: center;
     margin: 0;
 
     h1 {
+      margin: 1rem;
       font-size: $font-size-xlg;
     }
 
@@ -37,13 +38,12 @@
 
   .headerRight {
     display: flex;
+    justify-content: flex-end;
     align-items: center;
-    width: 100%;
   }
 
   .moduleStats {
     display: flex;
-    flex-direction: row;
     flex-wrap: wrap;
     margin-right: 1rem;
 

website/src/views/planner/PlannerSettingsButton.tsx

@@ -12,7 +12,7 @@ const PlannerSettingsButton: React.FC<Props> = ({ onClick }) => {
 
   return (
     <button className="btn btn-svg btn-outline-primary" type="button" onClick={onClick}>
-      <Settings className="svg" />
+      <Settings className={narrowViewport ? '' : 'svg'} />
       {narrowViewport ? '' : 'Settings'}
     </button>
   );