CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Keep Triple Step art flush to the section’s right edge.

Browse Source 
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>
This commit is contained in:
adilallo
2026-08-19 11:48:51 -06:00
co-authored by Cursor
parent 91f1d1569a
commit a525b12b5c
4 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/type/TripleStep/TripleStep.container.tsx
+1 -1
View File
@@ -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();
app/components/type/TripleStep/TripleStep.view.tsx
+7 -7
View File
@@ -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>