Playground cards have inconsistent heights
Maintainers usually reply within 1 day
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 72/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- react, typescript
Research direction
Start from the playground page at https://docusaurus.io/docs/playground and locate the CodeSandbox and StackBlitz card components and their styles. Compare how the descriptions and footer buttons affect card height, then check the page at different viewport widths. Done when cards in each row have equal heights, footer buttons align at the bottom, and the layout remains responsive.
Written by the indexing model from the issue text.
Description
Have you read the Contributing Guidelines on issues?
- I have read the Contributing Guidelines on issues.
Prerequisites
- I'm using the latest version of Docusaurus.
- I have tried the
npm run clearoryarn clearcommand. - I have tried
rm -rf node_modules yarn.lock package-lock.jsonand re-installing packages. - I have tried creating a repro with https://new.docusaurus.io.
- I have read the console error message carefully (if applicable).
Description
The CodeSandbox and StackBlitz playground cards on the Docusaurus website can have different heights because their descriptions have different lengths. This results in uneven card layouts and misaligned footer buttons.
I'd like to make the cards in the same row consistent in height while keeping the layout responsive.
Reproducible demo
https://docusaurus.io/docs/playground
Steps to reproduce
- Step 1: Open the Docusaurus website page containing the playground cards.
- Step 2: Locate the CodeSandbox and StackBlitz cards.
- Step 3. Compare their heights and the vertical alignment of their footer buttons.
Expected behavior
Playground cards in the same row should have consistent heights, and their footer buttons should align at the bottom.
Actual behavior
The cards may have different heights depending on their description lengths, resulting in uneven card bottoms and misaligned footer buttons.
Your environment
- Public source code: https://github.com/facebook/docusaurus
- Public site URL: https://docusaurus.io/docs/playground
- Docusaurus version used: https://github.com/facebook/docusaurus/pull/12734
- Environment name and version (e.g. Chrome 89, Node.js 16.4): Google Chrome | 155.0.8059.82 (Official Build) (64-bit), Node.js v24.21.0
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11 version 26H2
Self-service
- I'd be willing to fix this bug myself.
- Dominant language
- TypeScript
- Stars
- 66.5k
- Forks
- 10.1k
- Avg merge
- 23h 6m
- Merged PRs (30d)
- 159
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from facebook/docusaurus
-
Page title drops a trailing # from the heading, e.g. # Learn C# becomes "Learn C" (AI-assisted)Possibly taken @lx3133584 claimed this 6 days ago. Openbug status: needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
facebook/docusaurus#12644 · 1 comment ·
Maintainers usually reply within 1 day
-
docusaurus serve: static assets 404 when baseUrl is not "/" and trailingSlash is truePossibly taken @Shashank01729 claimed this 27 days ago. Openbug status: needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
facebook/docusaurus#12476 · 4 comments ·
Maintainers usually reply within 1 day
-
Firefox clips descenders in documentation sidebar labels on WindowsPossibly taken @xusnitdinov claimed this 94 days ago. Openbug status: needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
facebook/docusaurus#12299 ·
Maintainers usually reply within 1 day
-
bug
Difficulty 1/5 1-3 hours Newbie friendliness 72/100
facebook/docusaurus#10490 · 10 comments · 5 reactions ·
Maintainers usually reply within 1 day
-
Announcement bar with a new `id` stays hidden on first page load for users who dismissed the previous onePossibly taken @trofim24 claimed this 6 days ago. Openbug status: needs triage
Difficulty 3/5 1-2 days Newbie friendliness 25/100
facebook/docusaurus#12646 ·
Maintainers usually reply within 1 day
All issues in facebook/docusaurus
Similar issues
-
area: app type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
ExpidetGames/code-reviewer#585 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 83/100
module-federation/core#5205 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 73/100
LanternOps/breeze#9392 · 1 comment ·
Maintainers usually reply within 1 day
-
engine-rs P3 review-deferral wasm
Difficulty 2/5 1-3 hours Newbie friendliness 77/100
maniator/verticopolis#1154 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day