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>
This commit is contained in:
adilalloandCursor committed 2026-09-28 14:01:33 -06:00
1 parent 1445cb7e1e
commit 4b5ec70447
4 files changed
+35 -3

No files matched your search

+18
View File
@@ -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,
@@ -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",