From 0671dc67a0286903a984345ee4bcc31f4bb72f9d Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Thu, 29 Oct 2026 15:35:42 +0300
Subject: [PATCH] style(computes): the host's sections on one line in every
 theme

- The host navigation takes one font size and spaces its dividers alike on
  both sides in every theme: Zephyr doubled the space after each divider,
  and with the Devices section its eight sections took two lines.
- Its labels are shorter: Storage, Filters.
- Measured in the 27 themes at 992, 1200 and 1440 px: one line in each,
  with at least 73 px to spare (Lux had 20 px before, Zephyr was 13 px
  short).
---
 computes/templates/computes/host_nav.html | 10 +++++-----
 computes/tests/test_host_nav.py           |  2 +-
 static/css/webvirtcloud.css               | 12 ++++++++++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/computes/templates/computes/host_nav.html b/computes/templates/computes/host_nav.html
index 5e1bf278..daee1973 100644
--- a/computes/templates/computes/host_nav.html
+++ b/computes/templates/computes/host_nav.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 {% load bootstrap_icons %}
 {# The host's sections. section: the one this page belongs to; detail: the page is an item of it (a pool, a network), not the section's own page #}
-<nav aria-label="{% trans "Host sections" %}">
+<nav class="host-nav" aria-label="{% trans "Host sections" %}">
     <ol class="breadcrumb shadow-sm">
         <li class="breadcrumb-item">
             {% if section == "overview" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'laptop' %} {% trans "Overview" %}</span>
@@ -12,8 +12,8 @@
             {% else %}<a href="{% url 'instances' compute.id %}"{% if section == "instances" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'server' %} {% trans "Instances" %}</a>{% endif %}
         </li>
         <li class="breadcrumb-item">
-            {% if section == "storages" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</span>
-            {% else %}<a href="{% url 'storages' compute.id %}"{% if section == "storages" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>{% endif %}
+            {% if section == "storages" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'device-hdd' %} {% trans "Storage" %}</span>
+            {% else %}<a href="{% url 'storages' compute.id %}"{% if section == "storages" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'device-hdd' %} {% trans "Storage" %}</a>{% endif %}
         </li>
         <li class="breadcrumb-item">
             {% if section == "networks" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</span>
@@ -24,8 +24,8 @@
             {% else %}<a href="{% url 'interfaces' compute.id %}"{% if section == "interfaces" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>{% endif %}
         </li>
         <li class="breadcrumb-item">
-            {% if section == "nwfilters" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'filter' %} {% trans "NWFilters" %}</span>
-            {% else %}<a href="{% url 'nwfilters' compute.id %}"{% if section == "nwfilters" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>{% endif %}
+            {% if section == "nwfilters" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'filter' %} {% trans "Filters" %}</span>
+            {% else %}<a href="{% url 'nwfilters' compute.id %}"{% if section == "nwfilters" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'filter' %} {% trans "Filters" %}</a>{% endif %}
         </li>
         <li class="breadcrumb-item">
             {% if section == "virtsecrets" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'key' %} {% trans "Secrets" %}</span>
diff --git a/computes/tests/test_host_nav.py b/computes/tests/test_host_nav.py
index 057adce6..fdb1426b 100644
--- a/computes/tests/test_host_nav.py
+++ b/computes/tests/test_host_nav.py
@@ -18,7 +18,7 @@ class HostNavTestCase(TestCase):
     def test_the_section_s_own_page_is_the_current_page(self):
         items = self.items(section="storages")
         self.assertEqual(len(items), 8)
-        self.assertEqual(items["Storages"], ("span", "page"))
+        self.assertEqual(items["Storage"], ("span", "page"))
         self.assertEqual(items["Overview"], ("a", None))
 
     def test_an_item_of_a_section_links_the_section_as_where_it_is(self):
diff --git a/static/css/webvirtcloud.css b/static/css/webvirtcloud.css
index 7c1265df..cb45b7b8 100644
--- a/static/css/webvirtcloud.css
+++ b/static/css/webvirtcloud.css
@@ -90,3 +90,15 @@ th[aria-sort="ascending"]:not([data-sort-method="none"])::after {
 .chart {
     height: 160px;
 }
+
+/* the host's sections (computes/host_nav.html) on one line in every theme:
+   one font size, and the divider spaced alike on its two sides (Zephyr
+   doubles the space after it) */
+.host-nav .breadcrumb {
+    --bs-breadcrumb-item-padding-x: .5rem;
+    font-size: .875rem;
+}
+
+.host-nav .breadcrumb-item + .breadcrumb-item::before {
+    padding-right: var(--bs-breadcrumb-item-padding-x);
+}