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() { />
{/* - 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. */}
{ 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(); + 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",