Skip to content

fix(website): prevent playground page from overflowing the viewport #11428

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timotheeguerin merged 1 commit into from
Jul 30, 2026
+23 −1
Merged

fix(website): prevent playground page from overflowing the viewport #11428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 6 additions & 0 deletions website/src/layouts/base-layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,12 @@ const initJsIntegrity = computeSriHash("1ds-init.js");

.main {
flex: 1;
/* Lay out page content as a column so pages can opt into filling the
available height (e.g. the playground) via `flex: 1` on their content,
rather than hard-coding `100vh - var(--header-height)`, which does not
account for the real rendered header height. */
display: flex;
flex-direction: column;
background-color: var(--colorNeutralBackground1);
}

Expand Down
18 changes: 17 additions & 1 deletion website/src/pages/playground.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,25 @@ const latestVersion = versions[0];
})}
/>
<BaseLayout footer={false}>
<div style={{ height: "calc(100vh - var(--header-height))", width: "100%" }}>
<div class="playground-container">
<AsyncPlayground client:only="react" latestVersion={latestVersion}>
<LoadingSpinner slot="fallback" message="Loading playground..." />
</AsyncPlayground>
</div>
</BaseLayout>

<style>
/* Fill the remaining height provided by the base layout's `.main` flex column
instead of subtracting a fixed `--header-height`, which is smaller than the
real rendered header and caused the page to overflow with a vertical
scrollbar. `display: grid` gives the playground (which fills via
`height: 100%`) a definite track to resolve against — a flex-sized block on
its own is not treated as a definite height for percentage-height children,
which would otherwise collapse the playground. */
.playground-container {
flex: 1;
min-height: 0;
width: 100%;
display: grid;
}
</style>
Loading