From 602acf7a162afcd3628d6d5973eec186811366d5 Mon Sep 17 00:00:00 2001
From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com>
Date: Sun, 21 Jun 2026 18:05:51 +0500
Subject: [PATCH] fix(twenty-website): fill feature-card visual frame on wide
 viewports (#21876)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem
On the home feature cards, the visual frame is capped at `max-width:
411px` (the scene's design width) and centered. Below ~411px-wide cards
this is invisible, but once a card grows past 411px (wider viewports)
the dark scene stops filling and the **card's light background shows on
both sides** of the visual.

At 1200px everything looks correct because the cards are narrower than
411px and the cap is never engaged; the issue only appears as the
viewport widens.

## Fix
`FeatureCard.tsx`, one file:
- **Remove the `max-width: 411px` cap** (and the now-dead `margin: 0
auto`) from `CardImageFrame` so the frame fills the card width at every
breakpoint. `useScaleToFit` then scales the 411×508 scene up to match —
it's a CSS transform on DOM, so it stays crisp; no raster upscaling.
- **Even out the card gutter** — `CardImage` padding `8px → 16px` (top +
sides) so the visual's inset matches the content's 16px inset instead of
stepping in. Bottom stays `0` (the content block's 16px provides the
bottom gutter).

The visual scenes themselves are untouched — this is purely the
frame/container.

## Before

<img width="1477" height="681" alt="image"
src="https://github.com/user-attachments/assets/731f1ef7-e761-468e-b7aa-a5a06f8ac790"
/>

## After

<img width="1473" height="705" alt="image"
src="https://github.com/user-attachments/assets/99d036a6-d3ad-4682-99c8-f283b5b95171"
/>
---
 .../src/sections/feature-cards/FeatureCard.tsx            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-website/src/sections/feature-cards/FeatureCard.tsx b/packages/twenty-website/src/sections/feature-cards/FeatureCard.tsx
index 9257a14bbb..cd6e7e7508 100644
--- a/packages/twenty-website/src/sections/feature-cards/FeatureCard.tsx
+++ b/packages/twenty-website/src/sections/feature-cards/FeatureCard.tsx
@@ -36,7 +36,7 @@ const CardContainer = styled.div`
 
 const CardImage = styled.div`
   box-sizing: border-box;
-  padding: ${spacing(2)} ${spacing(2)} 0;
+  padding: ${spacing(4)} ${spacing(4)} 0;
   width: 100%;
 `;
 
@@ -46,14 +46,14 @@ const SCENE_DESIGN_HEIGHT_PX = 508;
 
 // Locked to the scene design box: every scene renders a fixed 411x508
 // design box scaled by frame-width / 411, so the frame, the scaled scene,
-// and any inner content shrink together at every breakpoint.
+// and any inner content scale together at every breakpoint. The frame fills
+// the card width (no max-width cap) so the dark scene reaches both edges
+// instead of leaving the card background showing once the card exceeds 411.
 const CardImageFrame = styled.div`
   aspect-ratio: ${SCENE_DESIGN_WIDTH_PX} / ${SCENE_DESIGN_HEIGHT_PX};
   background-color: ${color('black-10')};
   border-radius: 2px;
   isolation: isolate;
-  margin: 0 auto;
-  max-width: ${SCENE_DESIGN_WIDTH_PX}px;
   overflow: hidden;
   position: relative;
   width: 100%;