[freyam]

What

Make the docs readable on phones, tablets and wide screens. This PR builds on #54.

Problem	Fix
On a phone, and at 1280px, the right part of each diagram was cut off	The diagram component sets --om-ascii-cols to its widest line. Its frame is a size container, so the type scales until the whole diagram fits: 13px where there is room, 6px at the smallest. The line height is rounded down to whole pixels, so box lines stay continuous at fractional sizes. Each pair of stacked diagrams uses one width, so the pair still reads as one figure
On a phone, 3-column tables squeezed the middle column to one word per line, and the last column went off screen	Below 640px, each row becomes a block. The first cell is the row title, and every other cell shows its column name above it. table-labels.js copies the header text into data-label, including on rows the model catalog adds later. A table without labels keeps the sideways scroll
Below 1024px the top bar had two rows in one frame: the logo with search and More actions, then the menu icon with the page title. The title repeats the h1	One row, like the website: the menu icon on the left, the eye in the centre, search and More actions on the right. The page offset under the bar drops from 160px to 104px, the same as the desktop spacing
On a phone, the page control (Copy page, or Ask Assistant where the assistant is on, as in production) was a separate bordered strip under the description, and Ask Assistant overlapped the title. Between 520 and 640px it sat under the title	The control always stays at the end of the title row. When the header is narrower than 520px, it shows only its icon and the menu arrow, and the title wraps before it. The label stays as the accessible name
The assistant's sparkle icon in the navbar was dimmer than search and More actions: it is a stroked SVG with its own gray	Every navbar icon takes its button's colour (stone-300, text on hover), on mobile and desktop
Cards had double padding (the theme's inner padding plus the tile's own), so each card on a phone was about 135px tall	Remove the inner padding. The tile's 16/18px inset is the only inset

The page never scrolls sideways at any width checked. Code blocks and tab rows still scroll sideways inside their own frame, which is standard for code.

Verification

• The local preview has no assistant, so the production page was also rendered with this CSS in place of the deployed one, at 390, 578 and 1280px: Ask Assistant fits the title row, and the search, assistant, More actions and menu icons all compute to rgb(206, 205, 201)

• Local preview with bunx --bun mint dev. Headless Chromium screenshots at 390, 768, 1280, 1920 and 2560px, of the introduction, quickstart, Agent & Capabilities, Datasets, Optimisers, Trace scoring, Eval, Models, Inference, MCP, CLI, API, Self-hosting, Glossary and Administration pages

• At every width, scrollWidth equals clientWidth

• The menu icon still opens the sidebar drawer, More actions still opens the link menu, and the copy-page arrow still opens its menu

• bunx mint validate: passed

• bunx mint broken-links: no broken links

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
overmind-core	🟢 Ready	View Preview	Oct 1, 2026, 1:03 PM

💡 Tip: Enable Automations to automatically generate PRs for you.