Skip to content

Commit 8b3cad0

Browse files
katinthehatsiteKateryna Kodonenko
andauthored
Studio: Ensure that the blueprint cards are proportionate in the blueprints gallery (#4156)
## Related issues <!-- Link a related issue to this PR. If the PR does not immediately resolve the issue, for example, it requires a separate deployment to production, avoid using the "Fixes" keyword and use "Related to" instead. --> Fixes STU-1853 ## How AI was used in this PR <!-- Help reviewers understand what to look for and verify that you've reviewed the code yourself. --> It was used to make a change, although it was pretty straightforward. ## Proposed Changes <!-- Explain the intent of this PR: - What problem does it solve, or what need does it address? - How does it affect the user (new capability, fix, performance, accessibility, etc.)? - Note any user-visible behavior changes or trade-offs. Focus on the "why" and the user impact. Avoid listing modified files or describing implementation mechanics — the diff already shows that. --> This PR ensures that the blueprint cards are proportionate on the blueprints gallery page. `height: 100%` makes every card stretch to the tallest card in its grid row. **Before** <img width="792" height="241" alt="Screenshot 2026-07-10 at 9 46 58 AM" src="https://github.com/user-attachments/assets/d99bd502-c041-47c1-bd76-0198f194fc5e" /> **After** <img width="1038" height="317" alt="Screenshot 2026-07-10 at 9 47 19 AM" src="https://github.com/user-attachments/assets/e6db9833-37e5-47da-9a49-9333099663b5" /> ## Testing Instructions <!-- Add as many details as possible to help others reproduce the issue and test the fix. "Before / After" screenshots can also be very helpful when the change is visual. --> * Pull the changes from this branch * Start Studio with `npm start` * Enable the `Agentic UI` feature flag from `Studio -> Feature flags` from the topbar * Click on the `New site -> Start from a blueprint` option * Scroll through the blueprints gallery and confirm that you can see the same height for each card ## Pre-merge Checklist <!-- Complete applicable items on this checklist **before** merging into trunk. Inapplicable items can be left unchecked. Both the PR author and reviewer are responsible for ensuring the checklist is completed. --> - [ ] Have you checked for TypeScript, React or other console errors? Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>
1 parent 7e252bd commit 8b3cad0

1 file changed

Lines changed: 1 addition & 0 deletions

File tree

apps/ui/src/components/blueprint-selector/style.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
display: flex;
4848
flex-direction: column;
4949
width: 100%;
50+
height: 100%;
5051
padding: 0;
5152
border: 1px solid var(--wpds-color-stroke-surface-neutral, #ddd);
5253
border-radius: 8px;

0 commit comments

Comments
 (0)