Fix workshop page gutters and interactive target sizing (#2490)

Author: Copilot

scripts/build-docs.test.js

@@ -86,17 +86,22 @@ test("docs keep accessible responsive gutters and menu target sizes", () => {
   const { css } = buildDocs();
 
   assert.ok(css.includes(".menu-toggle,\n.menu-close {\n  display: inline-grid;\n  flex: 0 0 auto;\n  place-items: center;\n  width: 44px;\n  height: 44px;"));
-  assert.ok(css.includes(".markdown-body {\n  max-width: 650px;\n  margin-inline: auto;\n  padding-inline: 20px;\n}"));
-  assert.ok(css.includes("@media (min-width: 480px) {\n  .markdown-body {\n    padding-inline: 24px;\n  }\n}"));
-  assert.ok(css.includes("@media (min-width: 768px) {\n  .markdown-body {\n    padding-inline: 32px;\n  }\n}"));
-  assert.ok(css.includes("@media (min-width: 1024px) {\n  .markdown-body {\n    padding-inline: 48px;\n  }\n}"));
-  assert.ok(css.includes("@media (min-width: 1440px) {\n  .markdown-body {\n    padding-inline: 64px;\n  }\n}"));
+  assert.ok(css.includes(".workshop-menu-group a {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 44px;"));
+  assert.ok(css.includes(".markdown-body {\n  max-width: 650px;\n  margin-inline: auto;\n  padding-inline: 20px !important;\n}"));
+  assert.ok(css.includes("@media (min-width: 480px) {\n  .markdown-body {\n    padding-inline: 24px !important;\n  }\n}"));
+  assert.ok(css.includes("@media (min-width: 768px) {\n  .markdown-body {\n    padding-inline: 32px !important;\n  }\n}"));
+  assert.ok(css.includes("@media (min-width: 1024px) {\n  .markdown-body {\n    padding-inline: 48px !important;\n  }\n}"));
+  assert.ok(css.includes("@media (min-width: 1440px) {\n  .markdown-body {\n    padding-inline: 64px !important;\n  }\n}"));
 });
 
 test("shared header and code copy controls meet 44px target sizes", () => {
   const { css } = buildDocs();
 
   assert.ok(css.includes(".site-title a {\n  display: block;\n  min-height: 44px;\n  box-sizing: border-box;\n  padding-block: 10px;\n  line-height: 24px;"));
+  assert.ok(css.includes(".markdown-body details > summary {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 44px;\n  cursor: pointer;\n}"));
+  assert.ok(css.includes(".markdown-body a:not(.anchor):not(.workshop-nav-btn),\n.workshop-navigation a:not(.anchor):not(.workshop-nav-btn) {\n  display: inline-flex;\n  align-items: center;\n  min-width: 44px;\n  min-height: 44px;"));
+  assert.ok(css.includes("body > footer a {\n  display: inline-flex;\n  align-items: center;\n  min-width: 44px;\n  min-height: 44px;\n}"));
+  assert.ok(css.includes(".workshop-nav-btn {\n  display: inline-flex;\n  gap: 0.4em;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 44px;"));
   assert.ok(css.includes(".code-copy-btn {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 44px;\n  min-height: 44px;"));
 });
 

scripts/lib/docs.css

@@ -246,7 +246,10 @@ html[data-color-mode="dark"] .menu-toggle-progress {
   list-style: none;
 }
 .workshop-menu-group a {
-  display: block;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 44px;
   padding: 8px;
   color: var(--fgColor-default, #1f2328);
   line-height: 1.35;
@@ -263,12 +266,19 @@ html[data-color-mode="dark"] .menu-toggle-progress {
   background-color: var(--bgColor-accent-muted, #ddf4ff);
 }
 
-.markdown-body > details:not([open]) {
-  display: none;
-}
 .markdown-body > details {
   scroll-margin-top: var(--workshop-sticky-header-offset);
 }
+.markdown-body details > summary {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 44px;
+  cursor: pointer;
+}
+.markdown-body > details:not([open]) {
+  display: none;
+}
 .markdown-body > details > summary {
   display: none;
 }
@@ -282,30 +292,30 @@ html[data-color-mode="dark"] .menu-toggle-progress {
 .markdown-body {
   max-width: 650px;
   margin-inline: auto;
-  padding-inline: 20px;
+  padding-inline: 20px !important;
 }
 
 @media (min-width: 480px) {
   .markdown-body {
-    padding-inline: 24px;
+    padding-inline: 24px !important;
   }
 }
 
 @media (min-width: 768px) {
   .markdown-body {
-    padding-inline: 32px;
+    padding-inline: 32px !important;
   }
 }
 
 @media (min-width: 1024px) {
   .markdown-body {
-    padding-inline: 48px;
+    padding-inline: 48px !important;
   }
 }
 
 @media (min-width: 1440px) {
   .markdown-body {
-    padding-inline: 64px;
+    padding-inline: 64px !important;
   }
 }
 .markdown-body li.task-list-item {
@@ -463,10 +473,20 @@ html[data-color-mode="dark"] .menu-toggle-progress {
 
 .markdown-body a:not(.anchor):not(.workshop-nav-btn),
 .workshop-navigation a:not(.anchor):not(.workshop-nav-btn) {
+  display: inline-flex;
+  align-items: center;
+  min-width: 44px;
+  min-height: 44px;
   color: var(--workshop-link-color);
   text-decoration: underline;
   text-underline-offset: 0.08em;
 }
+body > footer a {
+  display: inline-flex;
+  align-items: center;
+  min-width: 44px;
+  min-height: 44px;
+}
 
 .markdown-body a:not(.anchor):not(.workshop-nav-btn):visited,
 .workshop-navigation a:not(.anchor):not(.workshop-nav-btn):visited {
@@ -505,6 +525,8 @@ html[data-color-mode="dark"] .menu-toggle-progress {
   display: inline-flex;
   gap: 0.4em;
   align-items: center;
+  box-sizing: border-box;
+  min-height: 44px;
   padding: 8px 16px;
   font-size: 14px;
   font-weight: 600;