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

Unify create-flow gutters, viewport height, and action-bar width so tablet and wide layouts stay aligned with step content.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-09-10 12:02:06 -06:00
co-authored by Cursor
parent 4055278628
commit 0e272f0c1e
20 changed files with 387 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx
+33 -26
View File
@@ -1,6 +1,11 @@
import ProportionBar from "../../progress/ProportionBar";
import Button from "../../buttons/Button";
import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
import {
CREATE_FLOW_FOOTER_SCRIM_CLASS,
CREATE_FLOW_PAGE_GUTTER_CLASS,
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
} from "../../../(app)/create/components/createFlowLayoutTokens";
export function CreateFlowFooterView({
secondButton,
@@ -9,41 +14,43 @@ export function CreateFlowFooterView({
proportionBarVariant: proportionBarVariantProp,
onBackClick,
className = "",
contentMaxClass = CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
footerAriaLabel,
}: CreateFlowFooterProps) {
const proportionBarVariant = proportionBarVariantProp ?? "default";
return (
<footer
className={`bg-black w-full ${className}`}
className={`relative bg-black w-full pb-[env(safe-area-inset-bottom,0px)] ${className}`}
role="contentinfo"
aria-label={footerAriaLabel}
>
{/* Progress Bar - Top */}
{progressBar && (
<div className="px-[var(--spacing-measures-spacing-500,20px)] md:px-[var(--spacing-measures-spacing-1200,48px)] pt-[var(--spacing-measures-spacing-300,12px)]">
<ProportionBar
progress={proportionBarProgress}
variant={proportionBarVariant}
/>
<div className={CREATE_FLOW_FOOTER_SCRIM_CLASS} aria-hidden />
<div className={CREATE_FLOW_PAGE_GUTTER_CLASS}>
<div className={`mx-auto w-full ${contentMaxClass}`}>
{progressBar && (
<div className="pt-[var(--spacing-measures-spacing-300,12px)]">
<ProportionBar
progress={proportionBarProgress}
variant={proportionBarVariant}
/>
</div>
)}
<div className="flex items-center justify-between py-[var(--spacing-measures-spacing-300,12px)] gap-[var(--spacing-measures-spacing-300,12px)]">
<Button
buttonType="ghost"
palette="default"
size="xsmall"
className="!text-x-small-label md:!text-small-label !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
onClick={onBackClick}
disabled={!onBackClick}
>
Back
</Button>
{secondButton && <div className="flex-shrink-0">{secondButton}</div>}
</div>
</div>
)}
{/* Buttons Container */}
<div className="flex items-center justify-between mx-auto max-w-[639px] md:max-w-[1920px] px-[var(--spacing-measures-spacing-500,20px)] md:px-[var(--spacing-measures-spacing-1200,48px)] py-[var(--spacing-measures-spacing-300,12px)] gap-[var(--spacing-measures-spacing-300,12px)]">
{/* Back Button - Left */}
<Button
buttonType="ghost"
palette="default"
size="xsmall"
className="!text-x-small-label md:!text-small-label !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
onClick={onBackClick}
disabled={!onBackClick}
>
Back
</Button>
{/* Second Button - Right */}
{secondButton && <div className="flex-shrink-0">{secondButton}</div>}
</div>
</footer>
);