SUMMARY:
Enhanced interactive diagram with clickable central core explaining
how all 6 services work together, plus improved side-by-side layout
for better desktop UX.
CHANGES:
1. Clickable Central Core (SVG):
- Added service-node class and data-service="overview" to central core
- Added cursor pointer and title for accessibility
- Users can now click the "T" to see overall governance explanation
2. Overview Service Data (JavaScript):
- Added 'overview' to serviceData with comprehensive description
- Explains how all 6 services work together as a system
- 6 key details about coordinated governance
- Promise: External architectural enforcement
3. Improved Desktop Layout (HTML):
- Scaled down diagram from max-w-2xl to max-w-md/lg
- Changed to flex layout (lg:flex-row) for side-by-side on desktop
- Panel now appears next to diagram on large screens
- Stacks vertically on mobile (flex-col)
- Updated tip text to highlight central core clickability
4. Panel Positioning (JavaScript):
- Panel inserts into flex container instead of diagram-container
- Added flex-1 class for proper flex behavior
- lg:min-w-[400px] ensures readable width on desktop
- Maintains mobile-first responsive design
DESKTOP UX:
- Diagram on left (max-w-lg = 512px)
- Service details on right (flex-1, grows to fill space)
- Both visible simultaneously on screens ≥1024px
MOBILE UX:
- Diagram full width (max-w-md = 448px, centered)
- Service details below diagram (full width)
- Maintains vertical flow on small screens
IMPACT:
Users can now:
✓ Click central "T" to understand overall governance
✓ See diagram and service details side-by-side (desktop)
✓ Better understand how 6 services coordinate together
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
bc2a58903f