Z-order fixes

yksa_web/static/yksa/css/kit.css

@@ -21,6 +21,26 @@
 
 :root {
 	--navbar-height: 44px;
+
+	/* One layer scale for the whole estate, because the alternative is each
+	   surface picking a number and a sticky bar eventually landing on top of an
+	   open menu -- which is exactly what ops's console header did to the navbar's
+	   timezone dropdown. Bootstrap's own scale starts at modal-backdrop (1040),
+	   so everything here stays below that.
+
+	     1020  in-page sticky bars (ops's console header)
+	     1030  page chrome: navbar, action bar, cookie banner
+	     1035  anything transient the user just opened -- above all of it  */
+	--yksa-z-sticky: 1020;
+	--yksa-z-chrome: 1030;
+	--yksa-z-floating: 1035;
+}
+
+/* Bootstrap declares --bs-dropdown-zindex on .dropdown-menu, not on :root, so it
+   has to be overridden here -- a value set on :root is shadowed and does nothing.
+   At Bootstrap's default of 1000 an open menu loses to every bar above. */
+.dropdown-menu {
+	--bs-dropdown-zindex: var(--yksa-z-floating);
 }
 
 /* -----------------------------------------------------------------------------
@@ -31,13 +51,13 @@
 	height: var(--navbar-height);
 	padding-top: 0;
 	padding-bottom: 0;
-	z-index: 1002;
+	z-index: var(--yksa-z-chrome);
 	border: none;
 	background-color: var(--bs-body-bg) !important;
 }
 
 .navbar {
-	z-index: 1002;
+	z-index: var(--yksa-z-chrome);
 }
 
 .navbar-brand {
@@ -45,7 +65,11 @@
 }
 
 /* Nav links fill the bar's height and butt against one another, so the active
-   item reads as a selected tab rather than a highlighted word. */
+   item reads as a selected tab rather than a highlighted word.
+
+   The height comes from the chain below, not from padding. It used to come from a
+   hard-coded `padding-top: 12px` on top of a text line box, which meant any item
+   whose content was not text -- the language flag -- came out short. */
 .nav-full-height {
 	display: flex;
 	align-items: center;
@@ -56,11 +80,29 @@
 	color: inherit;
 	padding-left: 1rem !important;
 	padding-right: 1rem !important;
-	padding-top: 12px;
+	padding-top: 0;
+	padding-bottom: 0;
 	background-color: var(--bs-body-bg);
 	margin-right: -1px;
 }
 
+@media (min-width: 992px) {
+	/* Give `height: 100%` above something definite to resolve against: the bar's
+	   height has to reach the <a> through the container, the collapse and the
+	   <li>, or it resolves to `auto` and the rule does nothing. */
+	.custom-navbar > .container,
+	.custom-navbar > .container-fluid,
+	.custom-navbar .navbar-collapse,
+	.custom-navbar .navbar-nav,
+	.custom-navbar .nav-item {
+		height: 100%;
+	}
+
+	.custom-navbar .navbar-nav {
+		align-items: stretch;
+	}
+}
+
 .nav-full-height.nav-link:hover,
 .nav-full-height.nav-link.active {
 	color: #fff !important;
@@ -147,6 +189,26 @@
 	color: var(--bs-secondary-color);
 }
 
+/* Separator between items in a run of inline metadata: a hairline rule, not a
+   character. A middot at .75rem is hard to tell from a decimal point or a full
+   stop, it is announced by screen readers, and it lands in the clipboard when the
+   line is copied. This is the inline-text counterpart to Bootstrap's `.vr`, which
+   is built for flex rows and has no margins of its own. */
+.yksa-sep {
+	display: inline-block;
+	width: 1px;
+	height: 0.9em;
+	margin-inline: 0.5rem;
+	vertical-align: -0.1em;
+	background-color: var(--bs-border-color);
+}
+
+/* Inside an already-tight run (a card header, a table cell), the default margin
+   is too generous. */
+.yksa-sep-tight {
+	margin-inline: 0.3rem;
+}
+
 /* Tabular numerals in the body face. Monospace is reserved for verbatim machine
    text -- hex dumps, TLE lines, command mnemonics. */
 .yksa-num {
@@ -220,7 +282,7 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	z-index: 1030;
+	z-index: var(--yksa-z-chrome);
 }
 
 .yksa-actionbar-spacer {
@@ -240,7 +302,7 @@
 	bottom: 0;
 	left: 0;
 	right: 0;
-	z-index: 1030;
+	z-index: var(--yksa-z-chrome);
 	background-color: #1f2937;
 	color: #f8fafc;
 }
@@ -267,6 +329,12 @@
 		padding-top: 0.5rem;
 		padding-bottom: 0.5rem;
 	}
+
+	/* Stacked, the rows size to their own content again. */
+	.custom-navbar .navbar-nav,
+	.custom-navbar .nav-item {
+		height: auto;
+	}
 }
 
 /* -----------------------------------------------------------------------------

yksa_web/templates/yksa/base.html

@@ -8,7 +8,9 @@ identical everywhere while its items differ per service. Same for the footer's
 position. Fill `navbar_items` and `navbar_tools`; change nothing else.
 
 Blocks a service normally fills:
-  title, meta_description, meta_keywords   the head
+  title             the page, in sentence case ("Data sources", not "Data Sources")
+  title_suffix      the service, the same on every page ("YKSA TDAS")
+  meta_description, meta_keywords          the rest of the head
   brand_url                                where the logo links
   navbar_items                             the left-hand <li> list
   navbar_tools                             extra right-hand items (auth, duty)
@@ -26,9 +28,7 @@ Blocks a service normally fills:
         <meta name="keywords"
               content="{% block meta_keywords %}YKSA, TMTC{% endblock meta_keywords %}">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>
+        <title>{% block title %}{% trans "YKSA" %}{% endblock title %} &mdash; {% block title_suffix %}YKSA{% endblock title_suffix %}</title>
-            {% block title %}{% trans "YKSA" %}{% endblock title %}
-        &mdash; {% block title_suffix %}YKSA{% endblock title_suffix %}</title>
         <link rel="stylesheet" href="{% static 'yksa/css/bootstrap.min.css' %}">
         {% comment %}
         Icons load here, not per page. Loading them in extra_head is why icons