Tighten Foundry plugin modal: wider, crisper, collapsibles for Prereqs/MCP/Skills

[thegovind]

User feedback after #309 merged: the Foundry plugin modal is too long, not wide enough, and overwhelming. This rewrites the modal layout to surface the primary actions and tuck the reference content behind native HTML disclosure widgets.

Layout changes

• Modal max-width: 560px → 720px (more room for prompt examples, less wrapping)
• Modal content: max-height: 88vh with overflow-y: auto so it scrolls if the user expands everything

Content changes

Visible above the fold (primary actions):

• Title + version badge
• One-sentence description (was a 4-line paragraph)
• Install (2 commands, unchanged)
• Try this — 4 short user prompts in a clean bulleted list, e.g. "Build a hosted agent grounded on my product docs" (was 5 long ones with verbose 'routes to X + Y' annotations)

Collapsed by default (using native <details> / <summary>):

• Prerequisites — Foundry project, Azure CLI, azd CLI (each with install link opening in a new tab)
• 3 MCP servers bundled — Azure MCP, Foundry MCP, Microsoft Docs
• 11 skills (orchestrator + 10 sub-skills) — one-line descriptions per skill

Each collapsible has a + indicator that flips to − when expanded; hover turns the summary text accent-colored.

Why this works

• First impression is now: what is it + how do I install + what should I try — no scrolling needed
• Power users can drill into prereqs, MCP details, or the full skill list without losing context
• Each prompt is bite-sized — model sees a short, declarative sentence to pattern-match against
• Wider modal removes mid-sentence wrapping in the prompt examples

Verification

• ✅ npm run build (prebuild + astro build + postbuild) succeeds
• ✅ Generated HTML contains modal-details, modal-prompts, 'Try this', '3 MCP servers bundled', '11 skills'
• ✅ max-width: 720px shows up in the bundled CSS
• ✅ Postbuild restored preserved files (llms.txt, .nojekyll, etc.)

[thegovind]

Review summary

UI tightening of the Foundry plugin modal — wider, collapsibles for low-priority sections, crisper above-the-fold. Clean change, well-described. A couple of small a11y/UX considerations.

Issues

🟡 Recommended

• <details> accessibility on iOS/Safari modal stacking. Native <details> works, but inside a <dialog> element on some Safari/iOS versions the <summary> can swallow focus or fail to announce expanded state. Worth a quick test on iOS Safari + VoiceOver before merge — if behavior is off, add aria-expanded syncing via a tiny toggle listener on <details>. If it's fine, ignore this.
• First-tab focus. When the dialog opens, the first focusable element is now the close button (×) in the header. Not bad, but consider moving initial focus to the title/heading region (tabindex="-1" + focus()) so screen reader users hear the title before the close affordance. Same change keeps keyboard users from accidentally dismissing on the very first Enter.
• Keyboard expand-all. Power users opening the modal often want to read everything. With three <details> collapsed by default, that's three extra clicks. Consider an "Expand all / Collapse all" link in the header (or persist the open state per-section to localStorage). Minor — fine to defer.

🟢 Nits

• The committed docs/index.html and docs/_astro/index.wDopByTC.css are Astro build outputs. If GitHub Pages serves directly from docs/, that's intentional and fine. If not, consider moving the build-output commit to a separate publish workflow so source-only PRs stay focused on docs-site/.
• Modal max-width: 720px is good for desktop; double-check the modal still feels right at ~360px viewport (the prompt list shouldn't crowd against the close button).

Otherwise looks good — small, focused, ships a clear UX win.

[thegovind]

Quick follow-up to my earlier review — found one more real bug while re-reading the CSS:

🔴 Nested max-height: 88vh on .plugin-modal AND .modal-content

.plugin-modal { max-height: 88vh; padding: 0; }
.modal-content { padding: var(--space-xl); max-height: 88vh; overflow-y: auto; }

Because .modal-content adds padding: var(--space-xl) and sets max-height: 88vh (same as its parent dialog), the inner element's content box can compute taller than the outer dialog and either overflow or clip its scroll region on tall viewports.

Fix: drop max-height from .modal-content and let overflow-y: auto operate inside the parent's height, or replace it with max-height: 100%.

🟢 Minor: dead transition

.modal-details-summary::after declares transition: transform 0.2s ease; but the open/close swap is a content change (+ → −), which can't be transitioned. Either remove the transition or animate a transform: rotate(45deg) on [open] instead.