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

@@ -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 %}

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 %}

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 _. #}
 

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>

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">

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>

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>

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 %}

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() }}

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() }}

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 %}

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>

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}"