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

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/CreateFlowLayoutClient.tsx

@@ -76,7 +76,13 @@ import {
   CREATE_FLOW_FOOTER_BUTTON_CLASS,
   CREATE_FLOW_FOOTER_BUTTON_ON_DARK_CLASS,
 } from "./utils/createFlowFooterClassNames";
-import { CREATE_FLOW_MD_CENTERED_MAIN_CLASS } from "./components/createFlowLayoutTokens";
+import {
+  CREATE_FLOW_MD_CENTERED_MAIN_CLASS,
+  CREATE_FLOW_PAGE_GUTTER_CLASS,
+  CREATE_FLOW_SCROLL_REGION_CLASS,
+  CREATE_FLOW_VIEWPORT_FRAME_CLASS,
+  getCreateFlowContentMaxClass,
+} from "./components/createFlowLayoutTokens";
 import {
   CUSTOM_RULE_CONFIRM_FOOTER_STEP_BY_STEP,
   methodCardFacetSectionForConfirmStep,
@@ -668,10 +674,10 @@ function CreateFlowLayoutContent({
   ].filter((b): b is NonNullable<typeof b> => b !== null);
 
   return (
-    <div className="relative flex h-screen min-h-0 flex-col overflow-hidden bg-black">
+    <div className={`${CREATE_FLOW_VIEWPORT_FRAME_CLASS} bg-black`}>
       {topBanners.length > 0 ? (
         <div
-          className="pointer-events-none fixed left-0 right-0 top-0 z-[200] flex flex-col gap-2 px-[var(--spacing-measures-spacing-500,20px)] pt-[var(--spacing-measures-spacing-300,12px)] md:px-[var(--measures-spacing-1800,64px)]"
+          className={`pointer-events-none fixed left-0 right-0 top-0 z-[200] flex flex-col gap-2 ${CREATE_FLOW_PAGE_GUTTER_CLASS} pt-[var(--spacing-measures-spacing-300,12px)]`}
           aria-live="polite"
         >
           {topBanners.map((b) => (
@@ -798,13 +804,17 @@ function CreateFlowLayoutContent({
         />
       ) : null}
       <main
-        className={`flex min-h-0 min-w-0 flex-1 w-full max-w-full overflow-x-hidden ${mainContentClass} ${mainResponsiveLayout}`}
+        className={`flex min-h-0 min-w-0 flex-1 w-full max-w-full overflow-x-hidden ${CREATE_FLOW_SCROLL_REGION_CLASS} ${mainContentClass} ${mainResponsiveLayout}`}
       >
         {children}
       </main>
       {!isCompletedStep && (
         <CreateFlowFooter
           className="shrink-0"
+          contentMaxClass={getCreateFlowContentMaxClass({
+            step: currentStep,
+            isTemplateReview: isTemplateReviewRoute,
+          })}
           progressBar={
             !isTemplateReviewRoute &&
             !isFinalReviewLike &&