ECP-106 : feat : Update formatting on data filters so that radio selectors are always on same row as text and allow text to wrap to the next line if there isn't enough room

app/views/analyze/_data_filters.html.erb

@@ -41,18 +41,18 @@
     <% end %>
 
       <% @presenter.slices.each do | slice |  %>
-        <div class="mx-3">
-          <input type="radio"
-                id="<%= slice.slug %>"
-                class="form-check-input"
-                name="graph"
-                value="<%= slice.graph.slug %>"
-                <%= slice.slug == @presenter.slice.slug ? "checked" : "" %>
-                <%= slice.slug == "all-data" ? "hidden" : "" %>>
-
-          <label for="<%= slice.slug %>"
-            <%= slice.slug == "all-data" ? "hidden" : "" %>>
-            <%= slice.to_s %></label>
+        <div class="d-flex flex-row mx-3">
+            <input type="radio"
+                  id="<%= slice.slug %>"
+                  class="form-check-input me-2"
+                  name="graph"
+                  value="<%= slice.graph.slug %>"
+                  <%= slice.slug == @presenter.slice.slug ? "checked" : "" %>
+                  <%= slice.slug == "all-data" ? "hidden" : "" %>>
+
+            <label class="text-break" for="<%= slice.slug %>"
+              <%= slice.slug == "all-data" ? "hidden" : "" %>>
+              <%= slice.to_s %></label>
         </div>
       <% end %>
     <% end %>

app/views/analyze/_group_selectors.html.erb

@@ -11,7 +11,7 @@
     <input type="hidden" id="year" name="<%= key  %>" value="<%= value %>">
   <% end %>
 
-  <select id="select-group" name="graph" class="mx-4 form-select" data-id="group-dropdown">
+  <select id="select-group" name="graph" class="ms-3 form-select" data-id="group-dropdown">
     <% @presenter.groups.each do |group| %>
       <option id="<%= group.slug %>" value="<%= group.graph.slug %>" <%= group.graph.slug == @presenter.graph.slug ? "Selected": "" %>><%= group.name %> </option>
     <% end %>

app/views/analyze/index.html.erb

@@ -10,7 +10,7 @@
     <hr>
   </div>
   <div class="d-flex flex-row pt-5 row">
-    <div class="d-flex flex-column flex-grow-6 bg-color-white col-3 px-5" >
+    <div class="d-flex flex-column flex-grow-6 bg-color-white col-3 py-5 px-3" >
       <%= render partial: "focus_area", locals: {categories: @presenter.categories, district: @district, school: @school, academic_year: @academic_year, category: @presenter.category,  subcategories: @presenter.subcategories} %>
       <%= render partial: "school_years", locals: {available_academic_years: @presenter.academic_years, selected_academic_years: @presenter.selected_academic_years, district: @district, school: @school, academic_year: @academic_year, category: @presenter.category, subcategory: @presenter.subcategory, measures: @presenter.measures, graph: @presenter.graph} %>
       <%= render partial: "data_filters", locals: {district: @district, school: @school, academic_year: @academic_year, category: @presenter.category, subcategory: @presenter.subcategory} %>