fix: [verified] simplify Roadmap adoption timeline

src/components/ArchifyDiagram/index.tsx

@@ -11,6 +11,15 @@ export default function ArchifyDiagram({name, title, compact = false, story = fa
   const opener = useRef<HTMLButtonElement>(null);
   const headingId = useId();
   const [expanded, setExpanded] = useState(false);
+  const [narrowRoadmap, setNarrowRoadmap] = useState(false);
+  useEffect(() => {
+    if (name !== 'strategy-roadmap') return;
+    const media = window.matchMedia('(max-width: 999px)');
+    const update = () => setNarrowRoadmap(media.matches);
+    update();
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  }, [name]);
   const {colorMode, setColorMode} = useColorMode();
   const initialTheme = useRef(colorMode);
   const desktop = useRef<HTMLIFrameElement>(null);
@@ -65,7 +74,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={`${source}?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 === 'strategy-roadmap' ? 'embed=1&' : ''}theme=${initialTheme.current}`} title={`${title} — expanded`} sandbox="allow-scripts allow-downloads" referrerPolicy="no-referrer" />}
     </dialog>
   </section>;
 }

src/css/custom.css

@@ -112,7 +112,7 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
 .archify-panel--story > .story-mobile {display: none;}
 .theme-doc-markdown:has([data-diagram="strategy-roadmap"]) {max-width: none;}
 .archify-panel--story[data-diagram="strategy-roadmap"] {max-width: none;}
-.archify-panel--story[data-diagram="strategy-roadmap"] > .story-desktop {aspect-ratio: auto; height: 360px;}
+.archify-panel--story[data-diagram="strategy-roadmap"] > .story-desktop {aspect-ratio: auto; height: 240px;}
 .archify-panel--story[data-diagram="strategy-target"] > iframe {aspect-ratio: 1620 / 1430;}
 .archify-panel--story[data-diagram="strategy-adoption"] > iframe {aspect-ratio: 545 / 408;}
 .archify-panel--story[data-diagram="strategy-maintenance"] > iframe {aspect-ratio: 524 / 408;}
@@ -124,7 +124,7 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
 @media (max-width: 700px) {
   .archify-panel--story > .story-desktop {display: none;}
   .archify-panel--story > .story-mobile {display: block; height: auto; aspect-ratio: 240 / 748;}
-  .archify-panel--story[data-diagram="strategy-roadmap"] > .story-mobile {aspect-ratio: 364 / 2600;}
+  .archify-panel--story[data-diagram="strategy-roadmap"] > .story-mobile {aspect-ratio: 364 / 1480;}
   .archify-panel--story[data-diagram="strategy-adoption"] > .story-mobile {aspect-ratio: 305 / 748;}
   .archify-panel--story[data-diagram="strategy-maintenance"] > .story-mobile {aspect-ratio: 284 / 748;}
   .archify-panel--story[data-diagram="strategy-target"] > .story-mobile {aspect-ratio: 680 / 2340;}
@@ -132,7 +132,7 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
 /* Five Roadmap cards need desktop space, including room for the sidebar. */
 @media (width < 1360px) {
   .archify-panel--story[data-diagram="strategy-roadmap"] > .story-desktop {display: none;}
-  .archify-panel--story[data-diagram="strategy-roadmap"] > .story-mobile {display: block; height: auto; aspect-ratio: 364 / 2600;}
+  .archify-panel--story[data-diagram="strategy-roadmap"] > .story-mobile {display: block; height: auto; width: 100%; max-width: 364px; margin-inline: auto; aspect-ratio: 364 / 1480;}
 }
 .archify-expand {display: grid; place-items: center; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: var(--ifm-link-color); cursor: pointer;}
 .archify-expand:hover {background: var(--ifm-hover-overlay);}
@@ -142,4 +142,11 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
 .archify-modal-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line);}
 .archify-modal-toolbar button {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; background: var(--gold); color: #14131a; font: inherit; font-size: 24px; font-weight: 700; border: 0; cursor: pointer;}
 .archify-panel .archify-modal iframe {flex: 1; min-height: 0; height: 100%; width: 100%;}
+/* Read the five-stage narrow Roadmap by scrolling, never by fitting its
+   entire height into a short phone screen. Other diagram viewers are unchanged. */
+@media (max-width: 999px) {
+  [data-diagram="strategy-roadmap"] .archify-modal {overflow-y: auto; overscroll-behavior: contain;}
+  [data-diagram="strategy-roadmap"] .archify-modal-toolbar {position: sticky; top: 0; z-index: 1; flex-shrink: 0; background: var(--surface);}
+  [data-diagram="strategy-roadmap"] .archify-modal iframe {flex: none; height: 1480px; min-height: 1480px;}
+}
 @media (prefers-reduced-motion: reduce) {.start-card {transition: none;} .start-card:hover {transform: none;}}