fix(responsive): improve mobile UX and fix SVG detection on architecture page
SUMMARY:
Fixed responsive design issues and SVG detection warnings on the
interactive architecture diagram. Improved mobile layout, padding,
and element sizing.
CHANGES:
1. Interactive Diagram JavaScript (interactive-diagram.js):
- Fixed SVG tagName check to be case-insensitive (line 152)
Was: svg.tagName !== 'svg'
Now: svg.tagName && svg.tagName.toLowerCase() !== 'svg'
- Updated service detail panel responsive styling (line 258)
Added: w-full (full width on mobile)
Added: lg:flex-1 (flex grow on desktop)
Changed: p-6 to p-4 sm:p-6 (responsive padding)
2. Architecture Page HTML (architecture.html):
- Improved container responsive padding (line 333)
Changed: p-6 lg:p-8 to p-4 sm:p-6 lg:p-8
- Reduced desktop gap for better layout (line 335)
Changed: lg:gap-8 to lg:gap-6
- Made SVG container full width on mobile (line 337)
Added: w-full lg:w-auto
- Improved SVG responsive sizing (line 342)
Changed: max-w-md lg:max-w-lg
To: max-w-sm sm:max-w-md lg:max-w-lg h-auto max-h-[500px]
- Updated cache-busting version (line 515)
Changed: v=20251019162000 to v=20251019163000
RESPONSIVE BREAKPOINTS:
- Mobile (default): Smaller padding (p-4), smaller max-width (max-w-sm)
- Tablet (sm: ≥640px): Medium padding (p-6), medium max-width (max-w-md)
- Desktop (lg: ≥1024px): Large padding (p-8), large max-width (max-w-lg)
FIXES:
✓ SVG detection warning resolved (case-insensitive tagName check)
✓ Mobile layout improved (better padding and sizing)
✓ Service detail panel responsive (full width on mobile)
✓ Diagram height constrained (max-h-[500px])
IMPACT:
Better mobile UX with appropriately sized elements and padding.
SVG detection should no longer log warnings in console.
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2b7b378d08