Fix selected graph node overflowing horizontally

[Modsofthenation]

Long identifiers in the selected-node inspector (top-right of the graph) were treated as unbreakable words, so the card painted past the graph pane.

This keeps that inspector inside the pane:

• overflow-wrap: break-word and overflow-x: hidden on the inspector
• max-width: calc(100% - 24px) so it cannot outgrow the graph
• wrap hints after /, _, and . so names and paths break at readable points
• ellipsis on fixed-width graph node titles

Testing

• Vitest: inspector CSS wraps, node titles ellipsize, wrap-hint separators
• Playwright e2e: inspector stays inside the graph pane (scrollWidth <= clientWidth, bounding box in pane)
• Live index of this repo: selected test_task_definition_file_survives_call_site_placeholder inspector is 260px wide with 12px right gap

  

Summary by CodeRabbit

• Bug Fixes

  • Improved graph inspector layout to prevent horizontal overflow.
  • Added wrapping for long file paths, qualified names, and node labels.
  • Truncated oversized node titles with ellipses for cleaner display.

• Tests

  • Added coverage confirming inspector content stays within the graph pane.
  • Added tests for text wrapping and node-title truncation.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c89f6350-e87a-49dd-a317-fc99ded01f43

📥 Commits

Reviewing files that changed from the base of the PR and between fde614b and a59f676.

📒 Files selected for processing (11)

• src/loadpath/static/assets/index-DASg3n-q.js
• src/loadpath/static/assets/index-DDj-QTuJ.css
• src/loadpath/static/assets/index-DKfAmZh8.js
• src/loadpath/static/index.html
• tests/e2e/test_ui_flows.py
• ui/src/ImpactGraph.tsx
• ui/src/format.test.ts
• ui/src/format.ts
• ui/src/styles.css
• ui/src/styles.test.ts
• ui/tsconfig.json

---

📝 Walkthrough

Walkthrough

The UI now inserts soft wrap points in graph and inspector text. CSS constrains long content and truncates node titles. Unit, stylesheet, and E2E tests verify wrapping and overflow behavior. Bundled asset references and TypeScript exclusions were updated.

Changes

Graph text layout

Layer / File(s)	Summary
Wrapping utility and graph rendering ui/src/format.ts, ui/src/format.test.ts, ui/src/ImpactGraph.tsx	wrapHint inserts zero-width spaces at path and identifier separators. Graph labels and inspector fields use the formatted text.
Layout constraints and validation ui/src/styles.css, ui/src/styles.test.ts, tests/e2e/test_ui_flows.py, src/loadpath/static/assets/index-DDj-QTuJ.css, src/loadpath/static/index.html, ui/tsconfig.json	Styles constrain inspector content and ellipsize node titles. Unit, stylesheet, and E2E tests verify the layout. Bundled asset references and test exclusions were updated.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• Modsofthenation/PR-Reviewer#2: Directly changes ImpactGraph.tsx and styles.css for different UI behavior.
• Modsofthenation/PR-Reviewer#6: Extends the same graph, formatting, and styling areas with text wrapping and overflow handling.

Suggested reviewers: cursoragent

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/graph-inspector-overflow-336d

---

_{Comment @coderabbitai help to get the list of available commands.}