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", 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