diff --git a/apps/logicsrc-web/e2e/openskill.spec.ts b/apps/logicsrc-web/e2e/openskill.spec.ts
index 4aa98ea..13de7a3 100644
--- a/apps/logicsrc-web/e2e/openskill.spec.ts
+++ b/apps/logicsrc-web/e2e/openskill.spec.ts
@@ -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);
diff --git a/apps/logicsrc-web/src/styles.css b/apps/logicsrc-web/src/styles.css
index 9a137d8..2d2f5c6 100644
--- a/apps/logicsrc-web/src/styles.css
+++ b/apps/logicsrc-web/src/styles.css
@@ -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%;