AI Component Sandbox

Content modal

Editorial reading surface for blogs, notes, release details, and long-form content.

Engineering note · 8 min read

Designing durable agent interfaces

A content modal should feel like a focused reading room: enough structure to orient the reader, but no window chrome competing with the article.

Start with a strict shell

Header, body, and footer are stable regions. The article owns its semantic headings, paragraphs, lists, and code. The modal only supplies rhythm, containment, scrolling, and depth.

Content should remain ordinary HTML even when the presentation becomes cinematic.

Keep the body readable

The reading column stays bounded while the dialog itself can grow. This avoids very long lines on desktop and keeps padding deliberate on small screens.

Use a visible scroll channel

Cyan marks the active rail, violet separates the track, and magenta appears on hover. Keyboard users can focus the region and scroll without moving the modal chrome.

The header and footer stay fixed while this article moves. That stable frame keeps context visible during longer blog posts, documentation, and generated explanations.

Layer 2 only chooses layout and presentation. The Layer 1 scroll primitive still owns the native overflow behavior.

<mjj-content-modal>
  <header data-modal-header>...</header>
  <zen-scroll-area data-modal-body data-cyber-scroll>
    ...
  </zen-scroll-area>
  <footer data-modal-footer>...</footer>
</mjj-content-modal>

Window modal

Structured workspace for tools and multi-region interfaces with fixed chrome and a bounded scrolling body.