From ad8d35e547d2cc08eebaeb43dcae1afc1d3295ed Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@comfy.org>
Date: Thu, 14 May 2026 15:23:02 +0000
Subject: [PATCH] fix(website): prevent cloud hero text from overflowing at lg
 viewports

The cloud hero text wrapper used lg:translate-x-[25%] which translates by
25% of its own 640px min-width = 160px past the viewport at lg-but-not-xl
widths (1024-1279px), making the CLOUD badge, heading, and subtitle clip
on portrait monitors like 1080x1920.

Sibling product heroes (local, enterprise, api) all use 10% for the same
class. Align the cloud hero with that established pattern.

Fixes FE-610
---
 apps/website/src/components/product/cloud/HeroSection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/components/product/cloud/HeroSection.vue b/apps/website/src/components/product/cloud/HeroSection.vue
index 201fa7b792..1030bdb5f8 100644
--- a/apps/website/src/components/product/cloud/HeroSection.vue
+++ b/apps/website/src/components/product/cloud/HeroSection.vue
@@ -379,7 +379,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
     <!-- Text -->
     <div
-      class="relative z-10 mt-17 w-full px-4 pb-16 lg:mt-0 lg:min-w-160 lg:flex-1 lg:translate-x-[25%] lg:px-20 lg:py-14"
+      class="relative z-10 mt-17 w-full px-4 pb-16 lg:mt-0 lg:min-w-160 lg:flex-1 lg:translate-x-[10%] lg:px-20 lg:py-14"
     >
       <ProductHeroBadge text="CLOUD" />