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:
1 parent
1445cb7e1e
commit
4b5ec70447
4 files changed
+35
-3
No files matched your search
@@ -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",
|
||||
|
||||
Reference in new issue
Block a user