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

fix(ui): use fixed width classes instead of w-full for diagram sizing

Browse source 
SUMMARY:
Fixed diagram sizing issue by replacing w-full with fixed width classes.
Diagram was taking up full screen due to w-full overriding max-width constraints.

CHANGES:
- Removed: w-full max-w-[96px] sm:max-w-[128px] lg:max-w-[160px]
- Added: w-24 sm:w-32 lg:w-40 (fixed widths)

SIZING:
- Mobile: w-24 = 96px (6rem)
- Tablet: sm:w-32 = 128px (8rem)
- Desktop: lg:w-40 = 160px (10rem)

This ensures the diagram is properly constrained to 25% of original size
across all viewports without being overridden by w-full.

Cache-busting: v=20251019165000

🤖 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:30:16 +13:00
parent f0ebd1a2b0
commit 74044f1a6f
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/architecture.html
View file

@ -339,10 +339,10 @@
data="/images/architecture-diagram-interactive.svg" data="/images/architecture-diagram-interactive.svg"
type="image/svg+xml" type="image/svg+xml"
id="interactive-svg-object" id="interactive-svg-object"
class="w-full max-w-[96px] sm:max-w-[128px] lg:max-w-[160px] h-auto" class="w-24 sm:w-32 lg:w-40 h-auto"
aria-label="Interactive Tractatus Architecture Diagram"> aria-label="Interactive Tractatus Architecture Diagram">
<!-- Fallback for browsers that don't support object tag --> <!-- 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-[96px] sm:max-w-[128px] lg:max-w-[160px]" /> <img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-24 sm:w-32 lg:w-40" />
</object> </object>
</div> </div>
@ -521,7 +521,7 @@
<script src="/js/scroll-animations.js"></script> <script src="/js/scroll-animations.js"></script>
<!-- Interactive Architecture Diagram (Phase 3) --> <!-- Interactive Architecture Diagram (Phase 3) -->
<script src="/js/components/interactive-diagram.js?v=20251019164500"></script> <script src="/js/components/interactive-diagram.js?v=20251019165000"></script>
<!-- Footer Component --> <!-- Footer Component -->
<script src="/js/components/footer.js"></script> <script src="/js/components/footer.js"></script>