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

Apply the FAQ Small, Medium, and Large variants at the matching breakpoints so the About accordion is not using desktop inset and type on tablet.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-19 17:21:47 -06:00
co-authored by Cursor
parent 846af91240
commit 9e698e7ab6
6 changed files with 69 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/layout/Accordion/Accordion.view.tsx
+11 -7
View File
@@ -11,22 +11,22 @@ const SIZE_CLASSES: Record<
> = {
s: {
header:
"gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center",
"min-h-[88px] gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center",
title: "text-[14px] font-medium leading-[18px]",
subhead: "text-x-small-label",
},
/** Figma: Layout / Accordion — Medium (22135-890258; header gap/px/py + Large/Label 18/24). */
m: {
header:
"gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center",
title: "text-large-label",
"min-h-[104px] gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center",
title: "text-large-label font-medium leading-6",
subhead: "text-[14px] leading-[18px] font-medium",
},
l: {
header:
"gap-[var(--spacing-scale-048)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] items-center",
"min-h-[135px] gap-[var(--spacing-scale-048)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] items-center",
/** Figma Large: X Large Label 24 Regular, lh 28 (21842-2869). */
title: "text-x-large-label",
title: "text-x-large-label font-normal leading-7",
subhead: "text-large-label",
},
};
@@ -137,10 +137,14 @@ function AccordionView({
) : null}
</span>
<span
className={`flex size-6 shrink-0 items-center justify-center text-[var(--color-content-default-primary,white)] transition-transform ${isOpen ? "-rotate-90" : "rotate-90"}`}
className="flex h-6 w-12 shrink-0 items-center justify-end text-[var(--color-content-default-primary,white)]"
aria-hidden
>
<Icon name="chevron_right" size={24} />
<span
className={`flex size-6 items-center justify-center transition-transform ${isOpen ? "-rotate-90" : "rotate-90"}`}
>
<Icon name="chevron_right" size={24} />
</span>
</span>
</button>
</h3>