Adjust header form selects to only take as much space as they require

app/assets/stylesheets/fonts.scss

@@ -42,22 +42,23 @@
   font-size: 20px;
 }
 
+header .form-select {
+  width: auto;
+  max-width: 290px;
+}
+
 .sub-header-4 {
   @extend .font-bitter;
-  @extend .weight-600;
+  @extend .weight-700;
   font-size: 16px;
 }
 
 .body-large {
-  @extend .font-cabin;
-  @extend .weight-400;
   font-size: 16px;
   line-height: 1.3;
 }
 
 .body-small {
-  @extend .font-cabin;
-  @extend .weight-400;
   font-size: 14px;
   line-height: 1.3;
 }

app/views/layouts/sqm/_header.html.erb

@@ -28,20 +28,14 @@
   </div>
 
   <div class="bg-color-blue">
-    <div class="container">
+    <div class="container d-flex justify-content-between align-items-center py-4">
-      <div class="row py-4 justify-content-between align-items-center">
+      <% if content_for?(:navigation) %>
-        <div class="col align-self-end">
+        <%= yield(:navigation) %>
-          <% if content_for?(:navigation) %>
+      <% end %>
-            <%= yield(:navigation) %>
-          <% end %>
-        </div>
 
-        <div class="col-2">
+      <select class="form-select" name="academic-year">
-          <select class="form-select" name="academic-year">
+        <option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
-            <option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
+      </select>
-          </select>
-        </div>
-      </div>
     </div>
   </div>
 </header>

app/views/sqm_categories/show.html.erb

@@ -1,5 +1,5 @@
 <% content_for :navigation do %>
-  <nav class="nav nav-tabs">
+  <nav class="nav nav-tabs align-self-end">
     <% @categories.each do |category| %>
       <div class="nav-item">
         <%= link_to [@district, @school, category, { year: @academic_year.range }], class: ["nav-link", current_page?([@district, @school, category, { year: @academic_year.range }]) ? "active" : ""] do %>
@@ -17,7 +17,7 @@
   <section class="subcategory-section">
     <h2 class="sub-header-2 font-bitter mb-7"><%= subcategory.name %></h2>
 
-    <div class="d-flex justify-space-between align-items-end">
+    <div class="d-flex justify-content-between align-items-end">
       <div>
         <%= render partial: "gauge_graph", locals: { gauge: subcategory.gauge_presenter, gauge_class: 'gauge-graph-lg', font_class: 'sub-header-3' } %>
       </div>
@@ -28,7 +28,7 @@
 
     <div class="measure-card d-flex px-7 pt-10 pb-7 mt-4 ">
       <% subcategory.measure_presenters.each do |measure_presenter| %>
-        <div class="measure-presenter d-flex flex-column justify-space-between align-items-center px-5">
+        <div class="measure-presenter d-flex flex-column justify-content-between align-items-center px-5">
           <h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3>
           <div>
             <%= render partial: "gauge_graph", locals: { gauge: measure_presenter.gauge_presenter, gauge_class: 'gauge-graph-sm', font_class: 'weight-700' } %>