fix(website): unstretch See all case studies button#11854
Conversation
The button used flex-1 inside a flex-row container, causing it to stretch to fill the entire content column. Drop flex-1/text-center and align the row's items to the start so the button sizes naturally and matches the proportions of other outline buttons across the site.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughRight-side content container in the CaseStudySpotlight component receives a test id; CTA row wrapper spacing and alignment are adjusted; the BrandButton's ChangesCaseStudySpotlight UI + Tests
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Caution Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional.
❌ Failed checks (1 error)
✅ Passed checks (6 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 👉 Get your free trial and get 200 agent minutes per Slack user (a $50 value). Review rate limit: 1/5 review remaining, refill in 36 minutes and 3 seconds. Comment |
🌐 Website E2ETip All tests passed.
🔗 Website PreviewWebsite Preview: https://comfy-website-preview-pr-11854.vercel.app This commit: https://website-frontend-ksndyty1u-comfyui.vercel.app Last updated: 2026-05-03T06:22:42Z for |
|
Re CodeRabbit's "End-To-End Regression Coverage For Fixes" check: This is a 4-line, declarative CSS change (drop Visual verification was done manually with Playwright at desktop (1440px: 592px → 223px) and mobile (390px) — screenshots are in the PR description. Skipping E2E coverage for this fix. |
…n test Mobile layout had no min gap between subheading and the CTA because the column relied on flex justify-between, which collapses when the column has no fixed height. Add mt-8 so the CTA always sits ~32px below the subheading on mobile (desktop is unchanged — justify-between still expands to fill the video-aligned column height). Add an E2E test that fails on the original regression: it asserts the CTA width is well below the content column width, which catches both the original flex-1 stretching and any future change that re-introduces full-width behavior.
Address review feedback:
- Scope mt-8 to mobile only (lg:mt-0) since the desktop column already gets adequate spacing from flex justify-between against the video height. The previous unscoped mt-8 was a no-op on desktop but mismatched intent.
- Add stable data-testid='case-study-content' selector instead of walking up the DOM with .locator('..').locator('..').
- Split the regression test in two: keep the desktop width assertion, and add a mobile-tagged sibling that verifies vertical breathing room (>=24px) above the CTA on Pixel 5 — which is where the spacing bug actually manifests.
dosubot
Bot
added
the
size:S
|
Thanks for the approval @Yourz! Re the failing "End-To-End Regression Coverage For Fixes" check (which keeps wanting tests under The check should be safe to ignore for |
4 participants
PR Created by the Glary-Bot Agent
Summary
The "See all case studies" button on the homepage
CaseStudySpotlightSectionwas rendering oddly stretched because it hadclass="flex-1 text-center"while being the sole child of aflex-rowcontainer — it expanded to fill the entire content column (~592px) instead of sizing to its label.This drops
flex-1/text-centerand addsitems-startto the wrapper so the button sizes to its content and is left-aligned, matching the proportions of every other outlineBrandButtonon the site (Hero, UseCase, customer detail, etc.).Changes
apps/website/src/components/home/CaseStudySpotlightSection.vue: removeflex-1 text-centerfrom theBrandButtonand align the row's items to the start.BrandButtonalready centers its label internally viainline-flex … justify-center, so droppingtext-centeris a no-op visually.Before / After
Review Focus
Whether the fix should also live on the
BrandButtoncomponent itself (e.g. a globalmax-width) instead of at the call site. I went with the instance-level fix because every other CTA in the website intentionally uses bareBrandButtonand lets the content size it; only this one hadflex-1. A blanketmax-widthwould risk changing Hero/MobileMenu buttons that explicitly opt intow-full lg:w-auto lg:min-w-60.Screenshots
┆Issue is synchronized with this Notion page by Unito