OpenNoodl/dev-docs/tasks/phase-4-canvas-visualisation-views/VIEW-001-topology-map/BUGFIX-CHANGELOG.md

Topology Map Panel - Bug Fix Changelog

Date: April 1, 2026
Status: ✅ All Critical Bugs Fixed

---

Overview

Fixed all 5 critical visual bugs identified in CRITICAL-BUGS.md. These were CSS/layout issues preventing proper card display and readability.

---

🐛 Bugs Fixed

Bug #1: Card Title Wrapping ✅

Issue: Card titles overflowed horizontally instead of wrapping to multiple lines.

Fix:

• Replaced <text> elements with <foreignObject> wrapper in FolderNode.tsx
• Added .FolderNode__nameWrapper CSS class with proper text wrapping
• Applied -webkit-line-clamp: 2 for max 2 lines with ellipsis

Files Modified:

• components/FolderNode.tsx (lines 73-76)
• components/FolderNode.module.scss (added .FolderNode__nameWrapper)

---

Bug #2: Black/Overflowing Text ✅

Issue: Component list and connection count text appeared black and overflowed. Poor contrast on dark backgrounds.

Fix:

• Added missing .FolderNode__componentList CSS class
• Added missing .FolderNode__connections CSS class
• Set fill: var(--theme-color-fg-default) with opacity adjustments
• Ensured proper visibility on dark folder backgrounds

Files Modified:

• components/FolderNode.module.scss (added both classes)

---

Bug #3: Mystery Plus Icon ✅

Issue: Unexplained '+' icon appearing in top-right corner of every folder card.

Fix:

• Removed "expand indicator" section (lines 119-134) from FolderNode.tsx
• Was intended for future drilldown functionality but was confusing without implementation
• Can be re-added later when drilldown UI is designed

Files Modified:

• components/FolderNode.tsx (removed lines 119-134)
• components/FolderNode.module.scss (removed .FolderNode__expandIndicator and .FolderNode__expandIcon - now obsolete)

---

Bug #4: Insufficient Top Padding (Folder Cards) ✅

Issue: Folder name text sat too close to top edge, not aligned with icon.

Fix:

• Increased icon y-position from folder.y + 12 to folder.y + 16
• Adjusted title y-position from folder.y + 23 to folder.y + 30
• Title now aligns with icon vertical center

Files Modified:

• components/FolderNode.tsx (lines 70, 74)

---

Bug #5: Component Cards Missing Padding & Node List ✅

Issue: Two problems:

1. Component cards also had insufficient top padding
2. Node list was supposed to display but wasn't implemented

Fix:

Padding:

• Increased headerHeight from 28px to 36px
• Adjusted icon and text y-positions accordingly
• Added extra vertical space for node list

Node List:

• Implemented node name extraction using component.graph.forEachNode()
• Sorted alphabetically, deduplicated, limited to 5 nodes
• Format: "Button, Group, Text +3" (shows count of remaining nodes)
• Added .ComponentNode__nodeList CSS class with proper styling

Files Modified:

• components/ComponentNode.tsx (lines 103-122, 170-176)
• components/ComponentNode.module.scss (added .ComponentNode__nodeList)

---

📊 Summary of Changes

Files Modified: 4

1. components/FolderNode.tsx

   • Removed expand indicator
   • Improved top padding
   • Added foreignObject for text wrapping

2. components/FolderNode.module.scss

   • Added .FolderNode__nameWrapper class
   • Added .FolderNode__componentList class
   • Added .FolderNode__connections class
   • Removed obsolete expand indicator classes

3. components/ComponentNode.tsx

   • Increased header height/padding
   • Implemented node list extraction and display
   • Adjusted layout calculations

4. components/ComponentNode.module.scss

   • Added .ComponentNode__nodeList class

---

✅ Verification Checklist

All success criteria from CRITICAL-BUGS.md met:

• Card titles wrap properly, no horizontal overflow
• All text visible with proper contrast on dark backgrounds
• No mystery icons present
• Top padding consistent across all card types
• Titles vertically aligned with icons
• Component cards show list of contained nodes

---

🎯 Next Steps

With all critical bugs fixed, ready to proceed to:

PHASE-3-DRAGGABLE.md - Implement drag-and-drop card positioning

---

📝 Testing Notes

To test these fixes:

1. Run npm run dev to start the editor
2. Open any project with multiple components
3. Open Topology Map panel (Structure icon in sidebar)
4. Verify:
   • Folder names wrap to 2 lines if long
   • All text is clearly visible (white on dark backgrounds)
   • No '+' icons on cards
   • Consistent spacing from top edge
   • Component cards show node list at bottom

---

Completed: April 1, 2026, 11:53 AM