Fix dangling separator in hero subtitle on narrow Safari viewports

The " · " before test.describe() was orphaned when .mono became
display:block on mobile.  Wrap it in .hero__sub-sep and hide it at
≤900px.  Also tighten topbar padding at ≤480px for iPhone-mini widths.
Add a responsive test asserting the separator is hidden on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Builder
2026-05-12 16:45:28 -04:00
co-authored by Cursor
parent 7a175a97e8
commit c7fa2e0f98
3 changed files with 24 additions and 3 deletions
+9
View File
@@ -419,6 +419,15 @@ test.describe("responsive", () => {
await page.click("#menu-btn");
await expect(page.locator("#sidebar")).toHaveClass(/is-open/);
});
test("hero subtitle separator is hidden on mobile", async ({ page }) => {
await page.goto("/");
const sep = page.locator(".hero__sub-sep");
await expect(sep).toBeHidden();
const sub = page.locator(".hero__sub");
await expect(sub).toContainText("Canadian citizen");
await expect(sub).toContainText("test.describe");
});
});
// ---------------------------------------------------------------------------