From 4b5ec70447bd394358e68581bd33705f1e0a074d Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 28 Sep 2026 14:01:33 -0600
Subject: [PATCH] Let completed-rule titles scroll away on small screens.

The heading still stays in the left column on desktop; on mobile it
moves with the document instead of pinning to the top of the viewport.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../screens/completed/CompletedScreen.tsx      |  2 +-
 .../_components/UseCaseCompletedRule.view.tsx  |  4 ++--
 tests/components/CompletedPage.test.tsx        | 18 ++++++++++++++++++
 tests/pages/use-cases-completed-rule.test.jsx  | 14 ++++++++++++++
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/app/(app)/create/screens/completed/CompletedScreen.tsx b/app/(app)/create/screens/completed/CompletedScreen.tsx
index ad7d604..b5e7ce8 100644
--- a/app/(app)/create/screens/completed/CompletedScreen.tsx
+++ b/app/(app)/create/screens/completed/CompletedScreen.tsx
@@ -179,7 +179,7 @@ export function CompletedScreen() {
             />
           </div>
           <div
-            className={`relative flex min-h-0 flex-col self-stretch overflow-x-hidden md:max-h-full md:overflow-y-auto ${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
+            className={`relative flex max-md:min-h-min max-md:shrink-0 flex-col overflow-x-hidden md:min-h-0 md:max-h-full md:self-stretch md:overflow-y-auto ${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
           >
             <div
               className="pointer-events-none sticky top-0 z-10 hidden h-5 shrink-0 bg-gradient-to-b from-[var(--color-teal-teal50,#c9fef9)]/55 from-0% via-[var(--color-teal-teal50,#c9fef9)]/20 via-50% to-transparent md:block"
diff --git a/app/(marketing-case-study)/use-cases/[slug]/rule/_components/UseCaseCompletedRule.view.tsx b/app/(marketing-case-study)/use-cases/[slug]/rule/_components/UseCaseCompletedRule.view.tsx
index ebec8db..9b2d6ec 100644
--- a/app/(marketing-case-study)/use-cases/[slug]/rule/_components/UseCaseCompletedRule.view.tsx
+++ b/app/(marketing-case-study)/use-cases/[slug]/rule/_components/UseCaseCompletedRule.view.tsx
@@ -34,7 +34,7 @@ export function UseCaseCompletedRuleView({
   return (
     <>
       {/*
-        Mobile: grid scrolls (title sticky at top of scrollport).
+        Mobile: grid scrolls (title and rule together).
         Desktop: viewport-tall columns; rule scrolls in the right column only.
       */}
       <div
@@ -84,7 +84,7 @@ export function UseCaseCompletedRuleView({
           className={`mx-auto grid w-full min-h-0 flex-1 grid-cols-1 gap-4 px-5 max-md:max-w-[639px] max-md:gap-6 max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:flex-1 md:grid-cols-2 md:grid-rows-1 md:items-start md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] md:overflow-hidden md:px-12 md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
         >
           <div
-            className={`relative z-[1] flex flex-col justify-start max-md:sticky max-md:top-0 max-md:z-10 max-md:shrink-0 max-md:pb-4 md:sticky md:top-0 md:z-[1] md:flex md:h-[calc(100dvh-4rem)] md:max-h-[calc(100dvh-4rem)] md:flex-col md:justify-center md:self-start md:overflow-hidden md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
+            className={`relative z-[1] flex flex-col justify-start max-md:shrink-0 max-md:pb-4 md:sticky md:top-0 md:z-[1] md:flex md:h-[calc(100dvh-4rem)] md:max-h-[calc(100dvh-4rem)] md:flex-col md:justify-center md:self-start md:overflow-hidden md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
             style={{ background: pageBg }}
           >
             <CreateFlowHeaderLockup
diff --git a/tests/components/CompletedPage.test.tsx b/tests/components/CompletedPage.test.tsx
index aefdff6..6e0dc01 100644
--- a/tests/components/CompletedPage.test.tsx
+++ b/tests/components/CompletedPage.test.tsx
@@ -67,6 +67,24 @@ describe("CompletedScreen", () => {
     expect(screen.queryByText("Values")).not.toBeInTheDocument();
   });
 
+  it("does not pin the title on small screens", () => {
+    sessionStorage.setItem(
+      CREATE_FLOW_LAST_PUBLISHED_KEY,
+      JSON.stringify(storedRuleFixture),
+    );
+    render(<CompletedScreen />);
+    const heading = screen.getByRole("heading", {
+      name: "Fixture Community Rule",
+    });
+    const column = heading.closest("div[class*='md:justify-center']");
+    expect(column).toBeTruthy();
+    expect(column.className).not.toMatch(/\bsticky\b/);
+    const ruleColumn = screen
+      .getByText("Fixture value title")
+      .closest("div[class*='md:overflow-y-auto']");
+    expect(ruleColumn?.className).toMatch(/max-md:shrink-0/);
+  });
+
   it("renders header and document from sessionStorage", () => {
     sessionStorage.setItem(
       CREATE_FLOW_LAST_PUBLISHED_KEY,
diff --git a/tests/pages/use-cases-completed-rule.test.jsx b/tests/pages/use-cases-completed-rule.test.jsx
index 4796fc4..cb0ccb2 100644
--- a/tests/pages/use-cases-completed-rule.test.jsx
+++ b/tests/pages/use-cases-completed-rule.test.jsx
@@ -90,6 +90,20 @@ describe("UseCaseCompletedRulePage", () => {
     },
   );
 
+  test("title column is sticky from md up only", async () => {
+    const fixture = messages.pages.useCasesCompletedRules.foodNotBombs;
+    render(
+      await UseCaseCompletedRulePage({
+        params: Promise.resolve({ slug: "food-not-bombs" }),
+      }),
+    );
+
+    const heading = screen.getByRole("heading", { name: fixture.title });
+    const column = heading.closest("div[class*='md:sticky']");
+    expect(column).toBeTruthy();
+    expect(column.className).not.toMatch(/\bmax-md:sticky\b/);
+  });
+
   test("marketing message bundle resolves Share (not the dotted create.topNav key)", () => {
     expect(getTranslation(marketingMessages, "create.topNav.share")).toBe(
       "Share",