|
201 | 201 | /* Across Rubies: one card per benchmark, a chart with the Rubies on the x axis. */ |
202 | 202 | .rcard { border-bottom: 1px solid var(--line); padding-block: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } |
203 | 203 | /* Card: the title says what is compared, the verdict what happened, the tiles the numbers behind it. */ |
204 | | -.rcard h3 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; } |
| 204 | +.rcard h3 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; } |
| 205 | +/* One line when it fits: fitTitles() shrinks a long title down to 14px first, and only lets it wrap past that. */ |
| 206 | +.rcard h3.one { white-space: nowrap; overflow-wrap: normal; } |
205 | 207 | .rcard h3 code { font-weight: 700; font-size: .9em; } |
206 | 208 | .rcard .verdict { margin: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15.5px; line-height: 1.45; color: var(--text); text-wrap: pretty; overflow-wrap: anywhere; } |
207 | 209 | .rcard .verdict code { font-weight: 700; color: var(--ink); } |
@@ -986,8 +988,21 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2> |
986 | 988 | }); |
987 | 989 | $("rout").innerHTML = h || `<p class="empty">No benchmark matches "${esc(find)}". Clear the find box to see all ${B.length}.</p>`; |
988 | 990 | if (!$("view-across-rubies").hidden) $("rout").querySelectorAll(".chart").forEach((c) => chart(B[+c.dataset.n], c)); |
| 991 | + fitTitles(); |
989 | 992 | pinned(); |
990 | 993 | } |
| 994 | + // A title of many report names stays on one line by getting smaller (20px down to 14px); one too long even at 14px wraps at 14px. |
| 995 | + function fitTitles() { |
| 996 | + $("rout").querySelectorAll(".rcard h3").forEach((h) => { |
| 997 | + h.classList.add("one"); |
| 998 | + h.style.fontSize = ""; |
| 999 | + const room = h.clientWidth, need = h.scrollWidth; |
| 1000 | + if (need <= room) return; |
| 1001 | + const size = Math.floor(20 * room / need * 10) / 10; |
| 1002 | + if (size >= 14) h.style.fontSize = size + "px"; |
| 1003 | + else { h.style.fontSize = "14px"; h.classList.remove("one"); } |
| 1004 | + }); |
| 1005 | + } |
991 | 1006 | // A section heading reached from "Jump to" lands under the pinned picker, not behind it. |
992 | 1007 | function pinned() { |
993 | 1008 | const p = $("rpicker"); |
|