From a525b12b5caa4faff9002a5e38d8d0c6d4fbd37f Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 19 Aug 2026 11:48:51 -0600
Subject: [PATCH] =?UTF-8?q?Keep=20Triple=20Step=20art=20flush=20to=20the?=
 =?UTF-8?q?=20section=E2=80=99s=20right=20edge.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the mid-width side gutter so the 1:2 ornament column meets the viewport from md up, while copy keeps its left inset.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../type/TripleStep/TripleStep.container.tsx       |  2 +-
 app/components/type/TripleStep/TripleStep.view.tsx | 14 +++++++-------
 stories/type/TripleStep.stories.js                 |  2 +-
 tests/components/type/TripleStep.test.tsx          |  6 ++++++
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/components/type/TripleStep/TripleStep.container.tsx b/app/components/type/TripleStep/TripleStep.container.tsx
index 4a958dc..09fdf63 100644
--- a/app/components/type/TripleStep/TripleStep.container.tsx
+++ b/app/components/type/TripleStep/TripleStep.container.tsx
@@ -5,7 +5,7 @@ import TripleStepView from "./TripleStep.view";
 import type { TripleStepProps } from "./TripleStep.types";
 
 /**
- * Figma: **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527&m=dev)); **md+** two-column + **`triple-step.svg`**.
+ * Figma: **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527&m=dev)); **md+** two-column + **`triple-step.svg`** in a 1:2 frame (tablet [22084-859257](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859257&m=dev); desktop [22084-858823](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-858823&m=dev)).
  */
 const TripleStepContainer = memo<TripleStepProps>((props) => {
   const reactId = useId();
diff --git a/app/components/type/TripleStep/TripleStep.view.tsx b/app/components/type/TripleStep/TripleStep.view.tsx
index 384c6d1..779c69f 100644
--- a/app/components/type/TripleStep/TripleStep.view.tsx
+++ b/app/components/type/TripleStep/TripleStep.view.tsx
@@ -28,10 +28,10 @@ function TripleStepView({
     <section
       data-figma-node="22084-859405"
       aria-labelledby={headingId}
-      className={`bg-transparent p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] ${className}`.trim()}
+      className={`bg-transparent px-[var(--spacing-scale-032)] py-[var(--spacing-scale-032)] md:px-0 md:py-[var(--spacing-scale-048)] ${className}`.trim()}
     >
-      <div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 gap-[var(--spacing-scale-032)] md:max-w-[1400px] md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:items-stretch md:gap-[var(--spacing-scale-060)] lg:items-center">
-        <div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:self-start lg:self-center">
+      <div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 items-center gap-[var(--spacing-scale-032)] md:max-w-none md:grid-cols-2 md:gap-0">
+        <div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:pl-[var(--spacing-scale-032)] lg:min-w-[358px] lg:pl-[var(--spacing-scale-064)]">
           <h2
             id={headingId}
             className="font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading"
@@ -73,16 +73,16 @@ function TripleStepView({
           </div>
         </div>
         <div
-          className="hidden min-h-0 min-w-0 w-full md:flex md:items-center md:justify-center"
+          className="relative hidden aspect-[1/2] min-w-0 w-full md:block"
           aria-hidden
         >
           <Image
             src={shapeSrc}
             alt=""
-            width={288}
-            height={576}
+            fill
             unoptimized
-            className="pointer-events-none h-auto w-full max-w-full min-w-0 select-none object-contain"
+            sizes="(min-width: 640px) 50vw, 100vw"
+            className="object-contain"
           />
         </div>
       </div>
diff --git a/stories/type/TripleStep.stories.js b/stories/type/TripleStep.stories.js
index cbacbc8..f8c8371 100644
--- a/stories/type/TripleStep.stories.js
+++ b/stories/type/TripleStep.stories.js
@@ -23,7 +23,7 @@ export default {
     docs: {
       description: {
         component:
-          "Figma **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527)). Headline uses **Large/Heading** from **md**; steps use **18px/22px** Bricolage medium + **Small/Paragraph** (14/20); outline CTA; **md+** second column shows **`triple-step.svg`**.",
+          "Figma **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527)). Headline uses **Large/Heading** from **md**; steps use **18px/22px** Bricolage medium + **Small/Paragraph** (14/20); outline CTA; **md+** right column is a 1:2 **`triple-step.svg`** frame flush to the section edge.",
       },
     },
   },
diff --git a/tests/components/type/TripleStep.test.tsx b/tests/components/type/TripleStep.test.tsx
index 9335b41..0098e84 100644
--- a/tests/components/type/TripleStep.test.tsx
+++ b/tests/components/type/TripleStep.test.tsx
@@ -28,5 +28,11 @@ describe("TripleStep", () => {
       "href",
       "/create",
     );
+
+    const artImg = document.querySelector(
+      '[data-figma-node="22084-859405"] img',
+    );
+    expect(artImg).toBeTruthy();
+    expect(artImg?.parentElement).toHaveClass("aspect-[1/2]");
   });
 });