From 955450d33f5bdd4e55f4762fda8528939de8f240 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 8 Oct 2026 06:28:02 -0400
Subject: [PATCH] fix(ui): section tabs above the breadcrumb, so the Ansible
 tab strip holds still (#5214)

The tabs were drawn in each page's content block, which base.html renders
after the breadcrumb, so on every nested Ansible page the strip moved down a
line. base.html now has a section_tabs block above the breadcrumb, and every
Ansible page fills it. A guard in test_breadcrumbs.py fails any page that calls
a tabs macro outside that block.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 steward/templates/_macros.html                |  7 +++--
 steward/templates/ansible/index.html          |  2 +-
 .../ansible/inventory/group_detail.html       |  2 +-
 .../templates/ansible/inventory/index.html    |  2 +-
 .../ansible/inventory/target_detail.html      |  2 +-
 steward/templates/ansible/playbook.html       |  2 +-
 .../templates/ansible/playbook_editor.html    |  2 +-
 steward/templates/ansible/playbooks.html      |  2 +-
 steward/templates/ansible/run_detail.html     |  2 +-
 steward/templates/ansible/schedule.html       |  2 +-
 steward/templates/ansible/schedules.html      |  2 +-
 steward/templates/base.html                   |  2 ++
 tests/test_breadcrumbs.py                     | 29 +++++++++++++++++++
 13 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/steward/templates/_macros.html b/steward/templates/_macros.html
index 771cc01..1e94cb9 100644
--- a/steward/templates/_macros.html
+++ b/steward/templates/_macros.html
@@ -73,9 +73,10 @@
 </div>
 {%- endmacro %}
 
-{# A section's own pages as tabs under the crumbs (#5328): items are
-   (key, label, href); the one whose key is `active` is the current page.
-   Links, not a tablist: each tab is its own page. #}
+{# A section's own pages as tabs (#5328): items are (key, label, href); the
+   one whose key is `active` is the current page. Links, not a tablist: each
+   tab is its own page. Call it in base.html's section_tabs block, which sits
+   above the breadcrumb, so the strip stays put as the trail grows. #}
 {% macro section_tabs(items, active, label) -%}
 <nav class="section-tabs" aria-label="{{ label }}">
   {%- for key, text, href in items %}
diff --git a/steward/templates/ansible/index.html b/steward/templates/ansible/index.html
index f240163..daae384 100644
--- a/steward/templates/ansible/index.html
+++ b/steward/templates/ansible/index.html
@@ -5,8 +5,8 @@
 {% from "_macros.html" import page_header %}
 {% from "ansible/_tabs.html" import ansible_tabs %}
 {% block title %}Ansible Runs — Steward{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("runs") }}{% endblock %}
 {% block content %}
-{{ ansible_tabs("runs") }}
 {% call page_header("Ansible Runs") %}
     <a href="/ansible/playbooks" class="btn">Run a playbook</a>
 {% endcall %}
diff --git a/steward/templates/ansible/inventory/group_detail.html b/steward/templates/ansible/inventory/group_detail.html
index 430a662..b7086b9 100644
--- a/steward/templates/ansible/inventory/group_detail.html
+++ b/steward/templates/ansible/inventory/group_detail.html
@@ -6,9 +6,9 @@
 {% from "ansible/_tabs.html" import ansible_tabs %}
 {% block title %}{{ group.name }} — Inventory — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Inventory", "/ansible/inventory/"), (group.name, "")]) }}{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("inventory") }}{% endblock %}
 {% block content %}
 {% set can_edit = session.user_role in ('operator', 'admin') %}
-{{ ansible_tabs("inventory") }}
 {{ page_header(group.name) }}
 {#- The name a play uses for it (#5334): Ansible takes only letters, digits and _. #}
 
diff --git a/steward/templates/ansible/inventory/index.html b/steward/templates/ansible/inventory/index.html
index 53e711d..164f0d7 100644
--- a/steward/templates/ansible/inventory/index.html
+++ b/steward/templates/ansible/inventory/index.html
@@ -8,9 +8,9 @@
 {% from "ansible/_tabs.html" import ansible_tabs %}
 {% block title %}Ansible Inventory — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Inventory", "")]) }}{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("inventory") }}{% endblock %}
 {% block content %}
 {% set can_edit = session.user_role in ('operator', 'admin') %}
-{{ ansible_tabs("inventory") }}
 {% call page_header("Inventory") %}
     {% if can_edit %}
     <button type="button" class="btn btn-ghost" onclick="document.getElementById('add-group').showModal()">Add group</button>
diff --git a/steward/templates/ansible/inventory/target_detail.html b/steward/templates/ansible/inventory/target_detail.html
index 4add064..a372b8c 100644
--- a/steward/templates/ansible/inventory/target_detail.html
+++ b/steward/templates/ansible/inventory/target_detail.html
@@ -7,9 +7,9 @@
 {% from "ansible/_tabs.html" import ansible_tabs %}
 {% block title %}{{ target.name }} — Inventory — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Inventory", "/ansible/inventory/"), (target.name, "")]) }}{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("inventory") }}{% endblock %}
 {% block content %}
 {% set can_edit = session.user_role in ('operator', 'admin') %}
-{{ ansible_tabs("inventory") }}
 {{ page_header(target.name) }}
 
 <p class="page-verdict">
diff --git a/steward/templates/ansible/playbook.html b/steward/templates/ansible/playbook.html
index dd5643a..9a8389d 100644
--- a/steward/templates/ansible/playbook.html
+++ b/steward/templates/ansible/playbook.html
@@ -7,9 +7,9 @@
 {% from "ansible/_macros.html" import interval_words %}
 {% block title %}{{ playbook_path }} — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Playbooks", "/ansible/playbooks"), (playbook_path, "")]) }}{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("playbooks") }}{% endblock %}
 {% block content %}
 {% set can_run = session.user_role in ('operator', 'admin') %}
-{{ ansible_tabs("playbooks") }}
 {% call page_header(playbook_path) %}
     {% if editable and session.user_role == 'admin' %}
     <a href="/ansible/playbooks/edit/{{ source_name }}/{{ playbook_path }}" class="btn btn-sm btn-ghost">Edit</a>
diff --git a/steward/templates/ansible/playbook_editor.html b/steward/templates/ansible/playbook_editor.html
index 9ed8a2c..1aec921 100644
--- a/steward/templates/ansible/playbook_editor.html
+++ b/steward/templates/ansible/playbook_editor.html
@@ -3,8 +3,8 @@
 {% from "_macros.html" import crumbs %}
 {% block title %}{{ "Edit" if editing else "New" }} Playbook — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Playbooks", "/ansible/playbooks"), (("Edit " ~ playbook_path) if editing else "New playbook", "")]) }}{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("playbooks") }}{% endblock %}
 {% block content %}
-{{ ansible_tabs("playbooks") }}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;">
   <h1 class="page-title" style="margin-bottom:0;">{{ "Edit playbook" if editing else "New playbook" }}</h1>
 </div>
diff --git a/steward/templates/ansible/playbooks.html b/steward/templates/ansible/playbooks.html
index 04bad08..740f187 100644
--- a/steward/templates/ansible/playbooks.html
+++ b/steward/templates/ansible/playbooks.html
@@ -7,8 +7,8 @@
 {% from "ansible/_tabs.html" import ansible_tabs %}
 {% block title %}Playbooks — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Playbooks", "")]) }}{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("playbooks") }}{% endblock %}
 {% block content %}
-{{ ansible_tabs("playbooks") }}
 {% call page_header("Playbooks") %}
     {% if can_add %}<a href="/ansible/playbooks/new" class="btn">New playbook</a>{% endif %}
 {% endcall %}
diff --git a/steward/templates/ansible/run_detail.html b/steward/templates/ansible/run_detail.html
index ba1c9e7..270e604 100644
--- a/steward/templates/ansible/run_detail.html
+++ b/steward/templates/ansible/run_detail.html
@@ -9,8 +9,8 @@
 {% macro words(parts) -%}
 {% for text, tone in parts %}{% if not loop.first %} · {% endif %}{% if tone %}<span class="tone-{{ tone }}">{{ text }}</span>{% else %}{{ text }}{% endif %}{% endfor %}
 {%- endmacro %}
+{% block section_tabs %}{{ ansible_tabs("runs") }}{% endblock %}
 {% block content %}
-{{ ansible_tabs("runs") }}
 {% call page_header(row.title) %}
     {% if run.status.value in ("running", "queued") and session.user_role in ("operator", "admin") %}
     <form method="post" action="/ansible/runs/{{ run.id }}/cancel" data-confirm="Cancel this run? Ansible stops where it is; tasks already applied stay applied." data-confirm-dismiss="Keep running">{{ csrf_field() }}
diff --git a/steward/templates/ansible/schedule.html b/steward/templates/ansible/schedule.html
index faee14c..e9aa2f2 100644
--- a/steward/templates/ansible/schedule.html
+++ b/steward/templates/ansible/schedule.html
@@ -7,9 +7,9 @@
 {% from "ansible/_macros.html" import interval_words %}
 {% block title %}{{ editing.name if editing else "New schedule" }} — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Schedules", "/ansible/schedules"), (editing.name if editing else "New schedule", "")]) }}{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("schedules") }}{% endblock %}
 {% block content %}
 {% set can_edit = session.user_role in ('operator', 'admin') %}
-{{ ansible_tabs("schedules") }}
 {% call page_header(editing.name if editing else "New schedule") %}
     {% if editing and can_edit %}
     <form method="post" action="/ansible/schedules/{{ editing.id }}/run-now">{{ csrf_field() }}
diff --git a/steward/templates/ansible/schedules.html b/steward/templates/ansible/schedules.html
index d402117..7c97a34 100644
--- a/steward/templates/ansible/schedules.html
+++ b/steward/templates/ansible/schedules.html
@@ -8,9 +8,9 @@
 {% from "ansible/_macros.html" import interval_words %}
 {% block title %}Ansible Schedules — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Schedules", "")]) }}{% endblock %}
+{% block section_tabs %}{{ ansible_tabs("schedules") }}{% endblock %}
 {% block content %}
 {% set can_edit = session.user_role in ('operator', 'admin') %}
-{{ ansible_tabs("schedules") }}
 {% call page_header("Schedules") %}
     {% if can_edit %}<a href="/ansible/schedules/new" class="btn">New schedule</a>{% endif %}
 {% endcall %}
diff --git a/steward/templates/base.html b/steward/templates/base.html
index 536672b..f2c108c 100644
--- a/steward/templates/base.html
+++ b/steward/templates/base.html
@@ -153,6 +153,8 @@ document.addEventListener('keydown', function (e) {
         {% if error %}
         <div class="alert alert-error">{{ error }}</div>
         {% endif %}
+        {#- A section's tabs sit above its trail, so they hold still from page to page. #}
+        {% block section_tabs %}{% endblock %}
         {% block breadcrumb %}{% endblock %}
         {% block content %}{% endblock %}
     </main>
diff --git a/tests/test_breadcrumbs.py b/tests/test_breadcrumbs.py
index 19e1d76..7035973 100644
--- a/tests/test_breadcrumbs.py
+++ b/tests/test_breadcrumbs.py
@@ -53,3 +53,32 @@ def test_every_nested_page_has_a_trail():
     missing = sorted(name for name, p in pages.items()
                      if name not in TOP_LEVEL and needs_crumbs_and_lacks_them(p.read_text()))
     assert not missing, f"add {{% block breadcrumb %}}{{{{ crumbs([...]) }}}} (rule 134): {missing}"
+
+
+# A section's tabs go in base.html's section_tabs block, above the trail, so the
+# strip holds still whether or not the page has a breadcrumb (#5214). Drawn in
+# the content block instead, they sit under the trail and jump down a line on
+# every nested page.
+_TABS_BLOCK = re.compile(r"\{%-?\s*block\s+section_tabs\s*-?%\}(.*?)\{%-?\s*endblock", re.S)
+_TABS_CALL = re.compile(r"\{\{-?\s*\w*_tabs\(")
+
+
+def tabs_outside_their_block(text: str) -> bool:
+    calls = len(_TABS_CALL.findall(text))
+    inside = sum(len(_TABS_CALL.findall(b)) for b in _TABS_BLOCK.findall(text))
+    return calls > inside
+
+
+def test_the_tabs_guard_can_fail():
+    assert tabs_outside_their_block('{% block content %}{{ ansible_tabs("runs") }}{% endblock %}')
+    assert not tabs_outside_their_block('{% block section_tabs %}{{ ansible_tabs("runs") }}{% endblock %}')
+
+
+def test_section_tabs_sit_above_the_trail():
+    base = (REPO / "steward/templates/base.html").read_text()
+    assert base.index("{% block section_tabs %}") < base.index("{% block breadcrumb %}")
+    pages = [p for p in template_files() if _EXTENDS_BASE.search(p.read_text())]
+    tabbed = [p for p in pages if _TABS_CALL.search(p.read_text())]
+    assert len(tabbed) >= 10, [str(p) for p in tabbed]  # the ten Ansible pages, at least
+    wrong = sorted(str(p.relative_to(REPO)) for p in tabbed if tabs_outside_their_block(p.read_text()))
+    assert not wrong, f"move the tabs into {{% block section_tabs %}}: {wrong}"