[PROJ-1809] Keep demo workflow panels reachable

[AndrewNordstrom]

Summary

• share one viewport-bound layout contract across every demo workflow panel
• keep community, epoch, and receipt actions outside independently scrolling content
• retain natural tablet/mobile document flow with no backend or demo-semantic changes

Verification

• npm run verify
• npm run docs:verify
• cd web-next && npm run lint
• cd web-next && npx tsc --noEmit
• focused demo regression: 13 passed
• full no-login browser flow at 1440x1100, 756x762, and 390x844
• epoch body: 1122px scroll height / 931px client height; action visible
• receipt body: 1378px scroll height / 489px client height; action visible
• zero browser warnings/errors; zero responsive horizontal overflow

Notes

• No backend, ranking, voting, aggregation, epoch, or receipt behavior changed.
• No legacy web/ source changed.
• CodeRabbit local review service remained in summarization twice for five minutes; hosted review is requested through the repository wrapper after PR creation.

Linear: PROJ-1809

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 046a4897-7273-499d-9cad-e87b4f73600c

📥 Commits

Reviewing files that changed from the base of the PR and between 8728af3 and 190fde9.

📒 Files selected for processing (6)

• ops/receipts/2026-07-12/PROJ-1809/validation.md
• web-next/app/demo/__tests__/frontend-release-blockers.test.tsx
• web-next/components/demo/agents-panel.tsx
• web-next/components/demo/panel-layout.ts
• web-next/components/demo/receipt-panel.tsx
• web-next/components/demo/vote-panel.tsx

---

Summary by CodeRabbit

• New Features

  • Desktop demo panels now use bounded layouts with independently scrolling content areas.
  • Primary actions remain visible outside the scrolling content.
  • Panel layouts adapt for smaller screen sizes.

• Accessibility

  • Scrollable regions are keyboard-focusable and include descriptive labels.
  • Focus-visible styling improves keyboard navigation.

• Bug Fixes

  • Standardized panel behavior across voting, community response, epoch advancement, and receipt inspection workflows.

• Documentation

  • Added validation records covering automated checks, browser testing, responsive behavior, and accessibility observations.

Walkthrough

The demo workflow now applies shared desktop containment classes to vote, community, epoch, and receipt panels. Scroll bodies are independently scrollable and keyboard-focusable, actions remain in marked footers, regression tests cover the layout contract, and validation results are documented.

Changes

Demo panel containment

Layer / File(s)	Summary
Shared panel layout and workflow panels web-next/components/demo/panel-layout.ts, web-next/components/demo/vote-panel.tsx, web-next/components/demo/agents-panel.tsx, web-next/components/demo/receipt-panel.tsx	Adds reusable bounded-frame and scroll-body classes, applies them across workflow panels, adds focusable regions and accessibility labels, and marks panel footers without changing action behavior.
Panel regression coverage and validation web-next/app/demo/__tests__/frontend-release-blockers.test.tsx, ops/receipts/2026-07-12/PROJ-1809/validation.md	Tests panel containment, footer markup, keyboard-focusable scrollports, and focus-visible styling; records automated and browser verification results.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related issues

• PROJ-1795 — Extends the earlier desktop voting-panel scrolling work to the remaining demo workflow panels and shares the same layout contract.

Possibly related PRs

• andrewnordstrom-eng/bluesky-community-feed#331 — Touches the same guided demo panel components and related layout markup.

Suggested labels: documentation, javascript

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: making demo workflow panels reachable via shared layout behavior.
Description check	✅ Passed	The description matches the panel layout, reachability, verification, and non-goal scope of the changeset.
Linked Issues check	✅ Passed	The implementation covers the shared desktop scroll contract, applies it to vote/agents/epoch/receipt, and adds regression and browser verification.
Out of Scope Changes check	✅ Passed	No unrelated code paths appear changed; the added validation receipt and test updates support the linked UI reachability work.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 dev/PROJ-1809-demo-panel-scroll

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch dev/PROJ-1809-demo-panel-scroll

Warning

Review ran into problems

🔥 Problems

These MCP integrations need to be re-authenticated in the Integrations settings: Notion

---

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

[AndrewNordstrom]

CodeRabbit exemption audit note for current head 190fde9505237f1dc8f942d5d1acba92c7f697ba:

• Repository wrapper was followed. Initial review was rate-limited for the documented 11-minute window; the retried hosted review then remained vendor_pending / "Review in progress" for more than 13 minutes with no review object or findings.
• Two independent read-only Codex reviews were run against origin/main...HEAD. They found two MEDIUM issues: keyboard-inaccessible scrollports and false-positive-prone source assertions.
• Both MEDIUM findings were fixed on the current head. No HIGH or CRITICAL findings were reported.
• Post-fix verification passed: focused 14/14, root 142 files / 1,525 tests, web-next lint/typecheck/build, docs verification, CodeQL, backend/frontend CI, quality and security gates.
• Browser QA completed the no-login flow at 1440x1100, 756x762, and 390x844 with bounded independent desktop scroll, reachable actions, natural sub-xl flow, no overflow, and no console errors.

Applying the repository-sanctioned temporary coderabbit:exempt label because the vendor remains pending after the allowed review window; this is not an admin merge bypass.