Fix Sidekiq health banner overlap (#3432)

app/views/layouts/application.html.erb

@@ -207,6 +207,8 @@ end %>
         </div>
       <% end %>
 
+      <%= yield :system_alerts %>
+
       <% if content_for?(:page_header) %>
         <%= yield :page_header %>
       <% end %>

app/views/layouts/settings.html.erb

@@ -36,6 +36,7 @@
           </div>
 
           <div class="grow space-y-4 px-3 md:px-10 pb-20 pt-4">
+            <%= yield :system_alerts %>
             <%= yield %>
             <%= settings_nav_footer_mobile %>
             <div class="my-4">

app/views/layouts/shared/_htmldoc.html.erb

@@ -40,19 +40,27 @@
         and for managed-mode deployments — `current_sidekiq_health` returns
         nil in those cases. %>
     <% if Current.user&.super_admin? && current_sidekiq_health && !current_sidekiq_health.healthy? %>
-      <%# Stack below any sticky impersonation bars instead of hard-coding
-          80px (`top-20`). Each bar is ~60px tall (`py-4` + content), so
-          adjust the fixed offset based on how many are visible. %>
-      <% banner_top_class = if super_admin_bar_visible && approval_bar_visible
-                             "top-36"
-                           elsif super_admin_bar_visible || approval_bar_visible
-                             "top-20"
-                           else
-                             "top-4"
-                           end %>
-      <div class="fixed z-40 <%= banner_top_class %> left-1/2 -translate-x-1/2 w-full max-w-2xl px-4">
-        <%= render "shared/sidekiq_health_banner", health: current_sidekiq_health %>
-      </div>
+      <% if sidebar_aware %>
+        <% content_for :system_alerts do %>
+          <div class="mx-auto w-full max-w-2xl">
+            <%= render "shared/sidekiq_health_banner", health: current_sidekiq_health %>
+          </div>
+        <% end %>
+      <% else %>
+        <%# Stack below any sticky impersonation bars instead of hard-coding
+            80px (`top-20`). Each bar is ~60px tall (`py-4` + content), so
+            adjust the fixed offset based on how many are visible. %>
+        <% banner_top_class = if super_admin_bar_visible && approval_bar_visible
+                               "top-36"
+                             elsif super_admin_bar_visible || approval_bar_visible
+                               "top-20"
+                             else
+                               "top-4"
+                             end %>
+        <div class="fixed z-40 <%= banner_top_class %> left-1/2 -translate-x-1/2 w-full max-w-2xl px-4">
+          <%= render "shared/sidekiq_health_banner", health: current_sidekiq_health %>
+        </div>
+      <% end %>
     <% end %>
 
     <%= yield %>

app/views/shared/_sidekiq_health_banner.html.erb

@@ -11,6 +11,7 @@
 
 <div role="alert"
      aria-live="assertive"
+     data-testid="sidekiq-health-banner"
      class="bg-warning/10 border border-warning/20 rounded-lg p-4 mb-4 text-sm text-primary">
   <div class="flex items-start gap-3">
     <div class="shrink-0">

test/system/sidekiq_health_banner_test.rb

@@ -0,0 +1,26 @@
+require "application_system_test_case"
+
+class SidekiqHealthBannerTest < ApplicationSystemTestCase
+  setup do
+    @health = Object.new
+    @health.stubs(:healthy?).returns(false)
+    @health.stubs(:reason).returns(:queue_backed_up)
+
+    Rails.application.config.stubs(:app_mode).returns("self_hosted".inquiry)
+    Redis.any_instance.stubs(:ping).returns("PONG")
+    SidekiqHealth.stubs(:current).returns(@health)
+  end
+
+  test "dashboard data warning reserves space instead of overlapping the page header" do
+    sign_in users(:sure_support_staff)
+    visit root_path
+
+    assert_selector "[data-testid='sidekiq-health-banner']"
+
+    banner_rect = page.evaluate_script("document.querySelector('[data-testid=\"sidekiq-health-banner\"]').getBoundingClientRect()")
+    heading_rect = page.evaluate_script("document.querySelector('h1').getBoundingClientRect()")
+
+    assert_operator banner_rect["bottom"], :<=, heading_rect["top"],
+      "expected the stale-data warning to finish above the dashboard heading"
+  end
+end