minor fixes

Not shown: a picture, a generated file, or past the length shown per change.

@@ -59,5 +59,6 @@ const method = (segId) => `${base}#${segId ? `method-${segId}` : "methodology"}`
 const datasetCount = sub ? 0 : Object.keys(datasetsOf(c.slug)).length;
 // The right-hand side is split into tabs so that the history is one click away instead of at
-// the bottom of a long page: [id, label, count]. A single state has only its score breakdown.
+// the bottom of a long page: [id, label, count]. Labels are kept short so that the row fits; the
+// panels' headings say it in full ("provinces and territories", "national estimate"). A single state has only its score breakdown.
 // A federation opens on its states or provinces, the national estimate after them; a single state
 // or province has its own breakdown, its history and the others of its country.
@@ -66,10 +67,10 @@ const tabs = (sub
       ["score", "Score breakdown"],
       history.length > 0 && ["history", "History", history.length],
-      ["units", `Other ${group.plural}`, group.units.length - 1],
+      ["units", `Other ${group.plural.split(" ")[0]}`, group.units.length - 1],
     ]
   : [
-      group && ["units", group.label === "State" ? "States" : group.plural[0].toUpperCase() + group.plural.slice(1), group.units.length],
-      ["score", group ? "National estimate" : "Score breakdown"],
-      d && ["context", "More context"],
+      group && ["units", group.plural[0].toUpperCase() + group.plural.split(" ")[0].slice(1), group.units.length],
+      ["score", group ? "National" : "Score breakdown"],
+      d && ["context", "Context"],
       history.length > 0 && ["history", "History", history.length],
       d && datasetCount > 0 && ["datasets", "Datasets", datasetCount],

@@ -1178,4 +1178,7 @@ details.segrow .segrow-top > span, .segrow:not(details) .segrow-top > span { fon
 .c-tabs { position: sticky; top: var(--hdr, 57px); z-index: 5; display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-top: 1px solid var(--text); border-bottom: 1px solid var(--border); }
 .c-tabs::-webkit-scrollbar { display: none; }
+/* wide enough for the row to wrap rather than hide a tab; narrower, it scrolls, faded at the edge */
+@media (min-width: 761px) { .c-tabs { flex-wrap: wrap; overflow-x: visible; column-gap: 20px; } }
+@media (max-width: 760px) { .c-tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 28px; } }
 .c-tabs button { flex: none; padding: 13px 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
 .c-tabs button:hover { color: var(--text); }