From 4c31935b7c1d6a9d6e39e04491a7c3ea11e1ddd3 Mon Sep 17 00:00:00 2001
From: Abdessamad Derraz <3028866+Abdess@users.noreply.github.com>
Date: Fri, 23 Oct 2026 07:26:30 +0200
Subject: [PATCH] fix: quiet heading ids and fit the upstream table

The system id a platform writes beside a heading is now small, muted
and set as code. The upstream table on the cross-reference page shares
the column width from 50rem: its rule never matched, a paragraph sits
between heading and table, and at 1440 px it ran 98 px past the edge.
---
 website/src/styles/retrobios.css | 34 +++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/website/src/styles/retrobios.css b/website/src/styles/retrobios.css
index 727a5133..dae9a3d4 100644
--- a/website/src/styles/retrobios.css
+++ b/website/src/styles/retrobios.css
@@ -345,12 +345,40 @@
 .rb-meta-card td a { word-break: normal; }
 .rb-meta-card td:first-child { font-weight: 600; color: var(--rb-text-secondary); width: 11rem; }
 
-/* Cross-reference by upstream: the address column wraps instead of pushing
-   the cores and platforms off screen. */
-.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) + section td:has(a[href^='http']) {
+/* Cross-reference by upstream, the last table of its page: the address
+   column wraps instead of pushing the cores and platforms off screen. */
+.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) ~ section td:has(a[href^='http']) {
 	max-width: 22rem;
 	overflow-wrap: anywhere;
 }
+/* Beside the column, the five columns share its width: at 1440 px the
+   Platforms column sat 100 px past the edge. */
+@media (min-width: 50rem) {
+	.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) ~ section table {
+		display: table;
+		table-layout: fixed;
+		width: 100%;
+	}
+	.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) ~ section :is(th, td) {
+		overflow-wrap: anywhere;
+	}
+	.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) ~ section th:nth-child(1) { width: 26%; }
+	.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) ~ section th:nth-child(2) { width: 26%; }
+	.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) ~ section th:nth-child(3) { width: 17%; }
+	.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) ~ section th:nth-child(4) { width: 18%; }
+	.sl-markdown-content .sl-heading-wrapper:has(> #by-upstream-emulator) ~ section th:nth-child(5) { width: 13%; }
+}
+
+/* The id a platform writes for a system, beside the name in its heading:
+   smaller and quieter than the name, set as code. */
+.sl-markdown-content :is(h2, h3) small {
+	margin-left: 0.4em;
+	font-family: var(--sl-font-mono);
+	font-size: 0.65em;
+	font-weight: 400;
+	color: var(--rb-text-secondary);
+	overflow-wrap: anywhere;
+}
 
 .rb-timestamp {
 	font-size: 0.8rem;