fix(web): keep expanded skills navigation inside mobile viewport

This commit is contained in:
Anthony Ettinger 2026-09-13 15:57:39 +00:00
parent 25e18f0766
commit 60ffe1051a
2 changed files with 21 additions and 1 deletions

View file

@ -4,10 +4,11 @@ test("human capabilities are discoverable and their Markdown can travel independ
await page.goto("/openprofile/skills");
await expect(page).toHaveURL(/\/openskill$/);
await expect(page.getByRole("heading", { name: "OpenSkill", exact: true })).toBeVisible();
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(page.viewportSize()!.width);
await page.getByRole("link", { name: "Logo design", exact: true }).click();
await expect(page.getByRole("heading", { name: "Logo design", exact: true })).toBeVisible();
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(page.viewportSize()!.width);
const sourceLink = page.getByRole("link", { name: "Markdown source", exact: true });
const source = await request.get((await sourceLink.getAttribute("href"))!);
expect(source.status()).toBe(200);

View file

@ -950,6 +950,25 @@ pre {
border-color: #3f5049;
}
@media (max-width: 720px) {
.rail nav .nav-group,
.rail nav .nav-children {
grid-column: 1 / -1;
}
.rail nav .nav-children {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-left: 0;
padding-left: 0;
border-left: 0;
}
.rail nav .nav-children a {
display: block;
overflow-wrap: anywhere;
text-align: left;
}
}
/* Breadcrumb trail at the top of every page but the home page. */
.crumbs {
width: 100%;