fix(docs): size demo modal to content, scroll tall demos

[pratyush618]

Problem

After porting the demos to React (#277), the modal dialog kept a fixed height (min(86vh, 880px)) — sized for the old full-bleed iframe. The React demos have their own intrinsic height, so:

• Short demos (saga, recovery) left large dead space below the readout.
• Tall demos (worksteal world map) overflowed and the readout sat cramped against the modal's bottom edge.

Fix

• .dm-dialog: height → max-height — the dialog now fits the demo's natural height, capped so tall demos scroll instead of overflowing the viewport.
• .dm-stage: becomes the scroll container (overflow: auto, min-height: 120px for the loading spinner).
• .dm-frame-react: no longer absolutely positioned — it flows so its height drives the stage.

Pure CSS; no component changes.

Verify

• pnpm lint + pnpm build green.
• Short demos: no dead space. Tall demos: scroll within the capped dialog; readout no longer cramped.

Summary by CodeRabbit

• Style
  • Improved demo modal sizing to fit content using a capped maximum height.
  • Enhanced the demo stage layout with minimum height and internal scrolling.
  • Kept demo controls pinned to the top and readouts pinned to the bottom while scrolling.
  • Improved masked gradient styling compatibility beyond WebKit browsers.
• New Features
  • Added a “Progress streaming — hand off & report live %” demo to the scenarios.
• Documentation
  • Updated styling comments to clarify the scrolling and modal behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fb6280f5-2feb-44a5-b091-63c0d679bc00

📥 Commits

Reviewing files that changed from the base of the PR and between b075d57 and 1ef4061.

📒 Files selected for processing (1)

• docs/app/components/demos/progress-demo.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• docs/app/components/demos/progress-demo.tsx

---

📝 Walkthrough

Walkthrough

CSS updates improve demo visualization layout with max-height dialog sizing, stage scrolling, sticky positioned controls, and cross-browser mask support. A new progress streaming demo component simulates chunked worker processing via RAF-driven animation and is wired into the demo registry and landing page as the primary scenario demo.

Changes

Progress streaming demo feature

Layer / File(s)	Summary
Demo container CSS improvements docs/app/styles/landing.css, docs/app/styles/demos.css	Dialog sizing switches from fixed height to max-height: min(86vh, 880px) for content-driven layout; .dm-stage enforces min-height: 120px and overflow: auto to enable internal scrolling; .demo-bar and .readout gain position: sticky with z-index: 3 to remain pinned at top and bottom during scroll; .term::before gains standard mask property to complement -webkit-mask for cross-browser gradient support.
Progress demo simulation and UI docs/app/components/demos/progress-demo.tsx	ProgressDemo component maintains RAF-driven simulation state (useRafLoop) that advances a virtual clock based on wall-clock deltas, respecting pause/resume and reduced-motion preferences. Derives progress metrics (chunk count, percent, elapsed time) and renders: title bar with size control and pause/restart buttons, SVG flow diagram with delay annotation, live progress bar, animated chunk grid (queued/processing/processed states), and stats readout panel.
Demo registration and scenario integration docs/app/components/demos/types.ts, docs/app/components/demos/registry.ts, docs/app/components/landing/scenario-finder.tsx	DemoId type union adds "progress" identifier; DEMO_COMPONENTS registry lazy-loads the progress demo; landing page scenario updates its primary CTA from scaling demo to progress streaming demo.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• ByteVeda/taskito#277: Introduces the React demo-port infrastructure and refactored DEMO_COMPONENTS registry that this PR extends with the new progress demo.

Poem

🐇 A progress bar dances across the stage,
Chunks flow and process, advancing with grace.
Sticky controls guide the curious eye,
While dialogs resize—no dead space goodbye!
React streams its promise, one demo at a time. 🚀

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main CSS-focused fix: changing demo modal sizing from fixed height to content-based max-height and enabling scrolling for tall demos. It aligns with the PR's primary objective of addressing modal sizing issues.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/demo-modal-spacing

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/app/components/demos/progress-demo.tsx`:
- Around line 93-98: The restart function unconditionally resets tRef.current to
0, which breaks the demo when reduced motion is enabled because the RAF loop
never runs, leaving the progress stuck at 0% instead of showing the finished
state. Modify the restart function to check for reduced motion support and
conditionally set the progress value: if reduced motion is enabled, set
tRef.current to the final completed progress value instead of 0, otherwise reset
to 0 as normal.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e21b02ed-2c8b-447a-b2b0-b35f640c796c

📥 Commits

Reviewing files that changed from the base of the PR and between 39c7c59 and b075d57.

📒 Files selected for processing (4)

• docs/app/components/demos/progress-demo.tsx
• docs/app/components/demos/registry.ts
• docs/app/components/demos/types.ts
• docs/app/components/landing/scenario-finder.tsx

✅ Files skipped from review due to trivial changes (3)

• docs/app/components/demos/types.ts
• docs/app/components/demos/registry.ts
• docs/app/components/landing/scenario-finder.tsx