feat: [verified] widen Skills Adoption diagram stories

src/components/ArchifyDiagram/index.tsx

@@ -12,14 +12,15 @@ export default function ArchifyDiagram({name, title, compact = false, story = fa
   const headingId = useId();
   const [expanded, setExpanded] = useState(false);
   const [narrowRoadmap, setNarrowRoadmap] = useState(false);
+  const skillsStory = /^strategy-(governance|quality|adoption|measurement|maintenance)$/.test(name);
   useEffect(() => {
-    if (!name.startsWith('strategy-roadmap')) return;
-    const media = window.matchMedia('(max-width: 999px)');
+    if (!name.startsWith('strategy-roadmap') && !skillsStory) return;
+    const media = window.matchMedia(skillsStory ? '(max-width: 700px)' : '(max-width: 999px)');
     const update = () => setNarrowRoadmap(media.matches);
     update();
     media.addEventListener('change', update);
     return () => media.removeEventListener('change', update);
-  }, [name]);
+  }, [name, skillsStory]);
   const {colorMode, setColorMode} = useColorMode();
   const initialTheme = useRef(colorMode);
   const desktop = useRef<HTMLIFrameElement>(null);
@@ -66,7 +67,7 @@ export default function ArchifyDiagram({name, title, compact = false, story = fa
     return () => {document.body.style.overflow = previousOverflow;};
   }, [expanded]);
   const close = () => {dialog.current?.close();};
-  return <section className={`archify-panel${compact ? ' archify-panel--compact' : ''}${story ? ' archify-panel--story' : ''}`} data-diagram={name} aria-label={title}>
+  return <section className={`archify-panel${compact ? ' archify-panel--compact' : ''}${story ? ' archify-panel--story' : ''}${skillsStory ? ' archify-panel--skills' : ''}`} data-diagram={name} aria-label={title}>
     <div className="archify-toolbar"><button ref={opener} type="button" className="archify-expand" aria-label={`Expand ${title}`} title="Expand diagram" onClick={() => setExpanded(true)}><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5" /></svg></button></div>
     {story ? <>
       <iframe className="story-desktop" ref={desktop} onLoad={() => syncTheme(desktop.current)} src={`${source}?embed=1&theme=${initialTheme.current}`} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />
@@ -74,7 +75,7 @@ export default function ArchifyDiagram({name, title, compact = false, story = fa
     </> : <iframe ref={desktop} onLoad={() => syncTheme(desktop.current)} src={`${source}?theme=${initialTheme.current}`} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />}
     <dialog ref={dialog} className="archify-modal" aria-labelledby={headingId} onClose={() => {setExpanded(false); opener.current?.focus();}}>
       <div className="archify-modal-toolbar"><strong id={headingId}>{title}</strong><button type="button" onClick={close} autoFocus aria-label="Close full-screen diagram"><span aria-hidden="true">×</span></button></div>
-      {expanded && <iframe ref={fullscreen} onLoad={() => syncTheme(fullscreen.current)} src={`${narrowRoadmap ? mobileSource : source}?${name.startsWith('strategy-roadmap') ? 'embed=1&' : ''}theme=${initialTheme.current}`} title={`${title} — expanded`} sandbox="allow-scripts allow-downloads" referrerPolicy="no-referrer" />}
+      {expanded && <iframe ref={fullscreen} onLoad={() => syncTheme(fullscreen.current)} src={`${narrowRoadmap ? mobileSource : source}?${name.startsWith('strategy-roadmap') || skillsStory ? 'embed=1&' : ''}theme=${initialTheme.current}`} title={`${title} — expanded`} sandbox="allow-scripts allow-downloads" referrerPolicy="no-referrer" />}
     </dialog>
   </section>;
 }

src/css/custom.css

@@ -152,3 +152,17 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
   [data-diagram^="strategy-roadmap"] .archify-modal iframe {flex: none; height: var(--roadmap-height); min-height: var(--roadmap-height);}
 }
 @media (prefers-reduced-motion: reduce) {.start-card {transition: none;} .start-card:hover {transform: none;}}
+
+/* Skills Adoption alone uses the full reading column, not a narrow preview. */
+.theme-doc-markdown:has(.archify-panel--skills) {max-width: none;}
+.archify-panel--story.archify-panel--skills {max-width: none;}
+.archify-panel--story.archify-panel--skills > .story-desktop {aspect-ratio: auto; min-height: 460px; height: calc((100vw - 364px) * .56 + 72px); max-height: 720px;}
+@media (max-width: 996px) and (min-width: 701px) {
+  .archify-panel--story.archify-panel--skills > .story-desktop {height: calc(100vw * .56 + 72px);}
+}
+@media (max-width: 700px) {
+  .archify-panel--story.archify-panel--skills > .story-mobile {aspect-ratio: auto; height: 1680px; max-width: 400px; margin-inline: auto;}
+  .archify-panel--skills .archify-modal {overflow-y: auto; overscroll-behavior: contain;}
+  .archify-panel--skills .archify-modal-toolbar {position: sticky; top: 0; z-index: 1; flex-shrink: 0; background: var(--surface);}
+  .archify-panel--skills .archify-modal iframe {flex: none; height: 1900px; min-height: 1900px;}
+}