fix(website): prevent cloud hero text from overflowing at lg viewports

[Yourz]

PR Created by the Glary-Bot Agent

---

Summary

The cloud hero text wrapper used lg:translate-x-[25%], which translates by 25% of its own lg:min-w-160 (640px) container — pushing the text 160px past the viewport at the lg-but-not-xl width range (1024–1279px). On portrait monitors like 1080×1920, this clipped the CLOUD badge, the <h1> heading, and the subtitle.

The three sibling product heroes — local, enterprise, api — all use lg:translate-x-[10%] on the equivalent text wrapper. The 25% in cloud/HeroSection.vue is the lone outlier. This PR aligns it.

- class="... lg:min-w-160 lg:flex-1 lg:translate-x-[25%] lg:px-20 lg:py-14"
+ class="... lg:min-w-160 lg:flex-1 lg:translate-x-[10%] lg:px-20 lg:py-14"

• Fixes FE-610

Verification

Automated (all on apps/website):

• oxlint, eslint, stylelint, oxfmt --check — pass
• pnpm typecheck (astro check) — 0 errors, 0 warnings
• pnpm build — 280 pages built successfully
• playwright test e2e/cloud.spec.ts --project=desktop — 13/13 pass
• playwright test e2e/visual-responsive.spec.ts --grep "/cloud .* no overflow" — 4/4 pass (393, 768, 1280, 1536)

Manual Playwright width-sweep on /cloud hero: all of 393, 768, 1024, 1080, 1200, 1280, 1366, 1440, 1536, 1600 render with the CLOUD badge, h1, subtitle, and CTA fully visible.

The text container still extends slightly past its parent at lg (same pattern as the canonical enterprise hero, which relies on html { overflow-x-clip } in BaseLayout.astro), but the visible content — capped by max-w-md on the subtitle and lg:max-w-2xl on the h1 — now fits within every viewport tested.

Screenshots

┆Issue is synchronized with this Notion page by Unito

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4f2ecbf6-d4a0-4e6a-bb52-4e4954581888

📥 Commits

Reviewing files that changed from the base of the PR and between 71092b2 and ad8d35e.

📒 Files selected for processing (1)

• apps/website/src/components/product/cloud/HeroSection.vue

---

📝 Walkthrough

Walkthrough

This PR adjusts the responsive horizontal positioning of the hero text container in the cloud product page by reducing its large-screen translate-x offset from 25% to 10%, shifting the text less to the right on larger viewports.

Changes

Hero Section Responsive Layout

Layer / File(s)	Summary
Hero text horizontal offset adjustment apps/website/src/components/product/cloud/HeroSection.vue	Hero text container's large-screen responsive offset updated from lg:translate-x-[25%] to lg:translate-x-[10%], reducing rightward shift on larger viewports.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Suggested labels

size:XS

Suggested reviewers

• benceruleanlu

Poem

A pixel dance, so small and true, 🐰
From twenty-five to ten we flew,
The hero text finds its new place,
With gentler spacing, better grace!

🚥 Pre-merge checks | ✅ 7

✅ Passed checks (7 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adjusting the cloud hero text's horizontal translation from 25% to 10% to prevent overflow at lg viewports.
Description check	✅ Passed	The description includes all required template sections (Summary, Changes, Review Focus) and provides comprehensive technical detail, verification steps, and before/after screenshots.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
End-To-End Regression Coverage For Fixes	✅ Passed	PR changes are exclusively in apps/website directory (HeroSection.vue), which is explicitly exempted from the E2E regression test requirement per the custom check instructions.
Adr Compliance For Entity/Litegraph Changes	✅ Passed	Check does not apply. PR modifies only HeroSection.vue (website UI), not src/lib/litegraph/, src/ecs/, or graph entity files. Per instructions, pass immediately when none of applicable paths appear.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch glary/fix-cloud-portrait-offscreen-fe610

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🌐 Website E2E

Tip

All tests passed.

Status	✅ Passed
Report	View Report

🔗 Website Preview

Website Preview: https://comfy-website-preview-pr-12293.vercel.app

_{This commit: https://website-frontend-qgomhx4ju-comfyui.vercel.app}

_{Last updated: 2026-05-15T15:20:05Z for ad8d35e}