Skip to content

fix(website): Discord pill in the header, and editor captions that fit their translation #1171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
EtienneLescot merged 2 commits into from
Oct 13, 2026
Merged

fix(website): Discord pill in the header, and editor captions that fit their translation #1171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7df694
docs(website): Discord as a pill beside GitHub in the header
EtienneLescot Oct 12, 2026
5bbc838
fix(website): grow the editor captions' slot for longer translations
EtienneLescot Oct 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions website/docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -653,12 +653,17 @@ export default async function createConfig(): Promise<Config> {
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:
`<a class="navbar-github-link" href="${DISCORD_URL}" target="_blank" rel="noopener">` +
'<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>' +
"Discord</a>",
},
{ type: "localeDropdown", position: "right" },
{
type: "html",
position: "right",
Expand Down
9 changes: 9 additions & 0 deletions website/src/components/Recreation/driver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLElement>("[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;
Expand Down
8 changes: 7 additions & 1 deletion website/src/components/Recreation/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
Loading