From d7df694b78232e44419b2fd649cda596c9cce59f Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Mon, 12 Oct 2026 15:14:07 +0200 Subject: [PATCH 1/2] docs(website): Discord as a pill beside GitHub in the header A community link, so it sits with GitHub's and in the same style, not among the site's own pages on the left. --- website/docusaurus.config.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index f71f654c9..3ba10bfca 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -653,12 +653,17 @@ export default async function createConfig(): Promise { label: "Roadmap", position: "left", }, + { type: "localeDropdown", position: "right" }, { - href: DISCORD_URL, - label: "Discord", - position: "left", + // A community link, so it sits with GitHub's and in the same style, not + // among the site's own pages on the left. + type: "html", + position: "right", + value: + `` + + '' + + "Discord", }, - { type: "localeDropdown", position: "right" }, { type: "html", position: "right", From 5bbc838c4d3580ecc9ca74616f07b8295a54c1c8 Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Mon, 12 Oct 2026 15:14:10 +0200 Subject: [PATCH 2/2] fix(website): grow the editor captions' slot for longer translations The slot was a fixed 118px, sized for the English captions. The French ones wrap to more lines, and their last line ran under the inspector panel. The driver now measures the tallest caption and --cap-h grows to it, with the same air. --- website/src/components/Recreation/driver.ts | 9 +++++++++ website/src/components/Recreation/styles.module.css | 8 +++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/website/src/components/Recreation/driver.ts b/website/src/components/Recreation/driver.ts index 8aa2f0824..c27ed95b0 100644 --- a/website/src/components/Recreation/driver.ts +++ b/website/src/components/Recreation/driver.ts @@ -415,6 +415,15 @@ export function attachDriver(refs: DriverRefs, cls: DriverClasses): () => void { ); root.style.removeProperty("--card-height"); root.style.setProperty("--footage-fit", "1"); + // The tallest caption, which --cap-h grows to when a translation wraps longer + // than the English it was sized for. + const capContent = Math.max( + ...Array.from( + captions.querySelectorAll("[data-cap]"), + (cap) => cap.offsetHeight, + ), + ); + root.style.setProperty("--cap-content", `${capContent}px`); const measurePanes = (withTargets: boolean) => { for (const b of BEATS) { root.dataset.beat = b.id; diff --git a/website/src/components/Recreation/styles.module.css b/website/src/components/Recreation/styles.module.css index 2be3f1dad..7fef9e579 100644 --- a/website/src/components/Recreation/styles.module.css +++ b/website/src/components/Recreation/styles.module.css @@ -200,6 +200,12 @@ } .stage { + /* 118 holds the English captions. A translation that wraps to more lines + grows it to the tallest caption the driver measures (--cap-content), with + the same air, or its last line runs under the panel. Declared here and not + on .band, because the driver writes --cap-content on the stage and a custom + property resolves where it is declared. */ + --cap-h: max(118px, calc(var(--cap-content, 0px) + 23px)); --dock: 1; --card-scale: 1; --editor-reveal: clamp(0, (var(--dock) - 0.85) * 6.66667, 1); @@ -1896,7 +1902,7 @@ there to hold the inspector off the title, and here the picture is what follows the title. Fourteen pixels of it come straight off the picture, which on a short screen is the thing with none to spare. */ - --cap-h: 96px; + --cap-h: max(96px, calc(var(--cap-content, 0px) + 1px)); --pnl-w: calc(100vw - 2 * var(--gut-h)); /* What the pane below the picture needs at its smallest: the palette is 168 tall and the transcript wants a few lines under its header. A