correct UI

app/frontend/styles/_table-group.scss

@@ -2,7 +2,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   margin: govuk-spacing(-3) govuk-spacing(-3) govuk-spacing(3);
-  padding: 0 govuk-spacing(3);
+  padding: govuk-spacing(1) govuk-spacing(3);
   scrollbar-color: $govuk-text-colour govuk-colour("light-grey");
 
   .govuk-table {

app/views/case_logs/_log_list.html.erb

@@ -1,11 +1,13 @@
 <section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
   <%= govuk_table do |table| %>
     <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular], id: title.dasherize) do |caption| %>
+    <span class="govuk-!-margin-right-4">
       <% if searched.present? %>
         <strong><%= pagy.count %></strong> <%= item_label %> found matching ‘<%= searched %>’ of <strong><%= total_count %></strong> total <%= title.downcase %>. <%= govuk_link_to("Clear search", request.path) %>
       <% else %>
         <strong><%= pagy.count %></strong> total <%= title.downcase %>
       <% end %>
+      </span>
       <%= govuk_link_to "Download (CSV)", "/logs.csv", type: "text/csv" %>
     <% end %>
     <%= table.head do |head| %>

app/views/case_logs/index.html.erb

@@ -12,10 +12,6 @@
   <%= content_for(:title) %>
 </h1>
 
-<%= render SearchComponent.new(current_user:, search_label: "Search by log ID, tenant code, property reference or postcode", value: @searched) %>
-
-<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
-
 <div class="app-filter-layout" data-controller="filter-layout">
   <div class="govuk-button-group app-filter-toggle">
     <%= govuk_button_to "Create a new lettings log", case_logs_path %>
@@ -25,6 +21,8 @@
   <%= render partial: "log_filters" %>
   <% if @case_logs.present? %>
     <div class="app-filter-layout__content">
+      <%= render SearchComponent.new(current_user:, search_label: "Search by log ID, tenant code, property reference or postcode", value: @searched) %>
+      <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
       <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
       <%== render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "logs" } %>
     </div>