[SandObserver]

Summary

• Render the landing page dashboard demo as the app's phone home screen below 768px, matching MOBILE_QUERY: a four-column grid, small widgets over a 2x2 block, and icon, label and badge sizes derived from the app's 393px reference width.
• Scale the demo's widget iframes from the measured card in the page script, since the phone grid is fluid and the widget documents render on a fixed 170px canvas.
• Wrap each duplicated marquee half in .mdup, and under prefers-reduced-motion hide the duplicates, stop the animation, drop the edge mask, show every service name inline, and make the strip a keyboard reachable horizontal scroller.
• Add a rehype-table-scroll plugin that wraps every markdown table in .sy-tscroll, plus a head script that makes only the overflowing wrappers focusable and labelled.
• Below 768px, hold tables with three or more columns at a 36rem minimum and let code in non-first columns break, so the last column no longer renders outside the row box.

Testing
All green: npm run build and npm run check both pass. Verified in Chrome at 320, 360, 390, 430, 601, 768, 900 and 1280px, in both colour schemes and both docs themes, with and without reduced motion: the demo grid is four columns with no clipped items, the reduced-motion strip reaches all 25 services, and the three-column tables scroll instead of dropping their last column.

Checklist

• npm run build and npm run check both pass.
• Product UI is shown by running or capturing it, never recreated in CSS.
• Any new preview or screenshot carries no private hostnames or real data.
• Visual changes verified in both colour schemes and both docs themes.
• Links to the app repo still resolve.

[cloudflare-workers-and-pages]

Deploying stackyard-docs with    Cloudflare Pages

Latest commit:	a9ae4cc
Status:	✅  Deploy successful!
Preview URL:	https://7eadd5e7.stackyard-docs.pages.dev
Branch Preview URL:	https://fix-mobile-portrait-layout.stackyard-docs.pages.dev

View logs