styling

app/views/locations/index.html.erb

@@ -9,22 +9,19 @@
 <% end %>
 
 <%= render partial: "organisations/headings", locals: { main: @scheme.service_name, sub: nil } %>
+<div class="app-filter-layout" data-controller="filter-layout">
 
-<div class="govuk-grid-row">
+  <%= render partial: "locations/location_filters" %>
-  <div class="govuk-grid-column-two-thirds-from-desktop">
+  <div class="app-filter-layout__content">
     <%= render SubNavigationComponent.new(items: scheme_items(request.path, @scheme.id, "Locations")) %>
 
     <h2 class="govuk-visually-hidden">Locations</h2>
 
+    <div class="app-filter-toggle"></div>
     <%= render SearchComponent.new(current_user:, search_label: "Search by location name or postcode", value: @searched) %>
 
     <%= govuk_section_break(visible: true, size: "m") %>
-  </div>
-</div>
 
-<div class="govuk-grid-row">
-  <%= render partial: "locations/location_filters" %>
-  <div class="govuk-grid-column-two-thirds-from-desktop">
     <%= govuk_table do |table| %>
       <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular]) do |caption| %>
         <%= render(SearchResultCaptionComponent.new(searched: @searched, count: @pagy.count, item_label:, total_count: @total_count, item: "locations", path: request.path)) %>