john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(responsive): improve mobile UX and fix SVG detection on architecture page

Browse source 
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>
This commit is contained in:
TheFlow 2025-10-19 18:19:39 +13:00
parent 9ec76b0d2c
commit 2b7b378d08
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/architecture.html
View file

@ -330,19 +330,19 @@
</div>
</div>
<div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-6 lg:p-8 border border-gray-200">
<div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8 border border-gray-200">
<!-- Flex container for side-by-side layout on desktop -->
<div class="flex flex-col lg:flex-row lg:items-start lg:gap-8">
<div class="flex flex-col lg:flex-row lg:items-start lg:gap-6">
<!-- Interactive SVG -->
<div class="flex-shrink-0 flex justify-center lg:justify-start mb-6 lg:mb-0">
<div class="flex-shrink-0 flex justify-center lg:justify-start w-full lg:w-auto mb-6 lg:mb-0">
<object
data="/images/architecture-diagram-interactive.svg"
type="image/svg+xml"
id="interactive-svg-object"
class="w-full max-w-md lg:max-w-lg"
class="w-full max-w-sm sm:max-w-md lg:max-w-lg h-auto max-h-[500px]"
aria-label="Interactive Tractatus Architecture Diagram">
<!-- Fallback for browsers that don't support object tag -->
<img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-full max-w-md lg:max-w-lg" />
<img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-full max-w-sm sm:max-w-md lg:max-w-lg" />
</object>
</div>
@ -512,7 +512,7 @@
<script src="/js/scroll-animations.js"></script>
<!-- Interactive Architecture Diagram (Phase 3) -->
<script src="/js/components/interactive-diagram.js?v=20251019162000"></script>
<script src="/js/components/interactive-diagram.js?v=20251019163000"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>

4
public/js/components/interactive-diagram.js
View file

@ -149,7 +149,7 @@ class InteractiveDiagram {
console.log('[InteractiveDiagram] Using documentElement as SVG');
}
if (!svg || svg.tagName !== 'svg') {
if (!svg || (svg.tagName && svg.tagName.toLowerCase() !== 'svg')) {
console.warn('[InteractiveDiagram] SVG diagram not found in contentDocument');
return;
}
@ -255,7 +255,7 @@ class InteractiveDiagram {
if (!panel) {
panel = document.createElement('div');
panel.id = 'service-detail-panel';
panel.className = 'flex-1 bg-white rounded-xl shadow-2xl p-6 border-2 lg:min-w-[400px]';
panel.className = 'w-full lg:flex-1 bg-white rounded-xl shadow-2xl p-4 sm:p-6 border-2 lg:min-w-[400px]';
panel.style.borderColor = service.color;
// Insert into the flex container for side-by-side layout