feat(traces): break-word attribute wrapping + layout toggle

[karl-power]

Summary

Addresses user feedback from #2689 about the redesigned trace UI.

What changed

• Attribute wrapping: Long span attribute values with no break points (e.g. url.path) now wrap fully when wrap mode is on, instead of being clipped with no way to see the full value.
• Layout toggle: Added a control next to the span detail's close button to move the detail panel between the right side (default) and the bottom of the waterfall. The choice is persisted.

Review follow-ups (from @elizabetdev):

• Key wrapping: Long attribute keys (e.g. longtask.attribution.entry_type) now wrap and are capped at half the row width so they can't squeeze the value column down to one character per line.
• Tab alignment: The span detail panel's Overview/Column Values content is now flush with the tab bar (removed the extra inline padding, scoped to the trace detail panel only — the row drawer and inline expanded row are unchanged).

Screenshots or video

Screen.Recording.2026-07-21.at.13.11.09.mov

How to test on Vercel preview

Preview routes: /search

Steps:

1. Run a search over the Demo Traces source and click a result row to open the row side panel, then open the Trace tab.
2. In the trace waterfall, click a span to open the span detail panel on the right.
3. Verify the detail panel content (span header card, "Top Level Attributes" section) is left-aligned with the Overview/Column Values tab bar above it, with no extra horizontal inset.
4. Click the layout toggle (data-testid trace-detail-layout-toggle) next to the close button and verify the detail panel moves to the bottom of the waterfall, then toggle it back.
5. In the attributes list, enable wrap mode (the wrap toggle in the attributes toolbar) and find a long unbroken attribute value (e.g. a URL path) — verify it wraps across lines instead of being clipped.
6. Narrow the detail panel by dragging the resize divider and confirm long attribute keys wrap within roughly the left half of the row while values remain readable (not squeezed to one character per line).

References

• Linear Issue: Closes HDX-4853
• GitHub Issue: Closes Issues with new trace UI #2689

[changeset-bot]

🦋 Changeset detected

Latest commit: 1446fb0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Jul 22, 2026 8:49am
hyperdx-storybook	Ready	Preview, Comment	Jul 22, 2026 8:49am

[github-actions]

🔵 Tier 2 — Low Risk

Small, isolated change with no API route or data model modifications.

Why this tier:

• Standard feature/fix — introduces new logic or modifies core functionality

Review process: AI review + quick human skim (target: 5–15 min). Reviewer validates AI assessment and checks for domain-specific concerns.
SLA: Resolve within 4 business hours.

Stats

• Production files changed: 5
• Production lines changed: 216 (+ 96 in test files, excluded from tier calculation)
• Branch: karl/span-sidebar-feedback
• Author: karl-power

To override this classification, remove the review/tier-2 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[github-actions]

E2E Test Results

✅ All tests passed • 242 passed • 1 skipped • 876s

Status	Count
✅ Passed	242
❌ Failed	0
⚠️ Flaky	1
⏭️ Skipped	1

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

Deep Review

Methodology note: The Bash/git sandbox and WebFetch were both unavailable in this environment (bwrap failed to initialize on every command), so the raw eadea332..HEAD diff could not be computed and the standard reviewer fan-out could not be dispatched with a diff attached. This review was performed by reading the checked-out PR head directly and analyzing the four changed regions the PR describes (DBTracePanel.tsx, DBRowOverviewPanel.tsx, DBRowDataPanel.tsx, HyperJson.module.scss). Pre-existing vs. introduced status is inferred from code structure rather than blame; the one high-severity finding is flagged accordingly.

🔴 P0/P1 -- must fix

• packages/app/src/components/DBRowOverviewPanel.tsx:326 -- A second Span Events accordion item (lines 326-339, hardcoded px="md") duplicates the one at lines 273-286 (px={contentPx}); both are direct children of the same <Accordion>, share value="spanEvents", and gate on the same hasSpanEvents, so any span with events renders Span Events twice with mismatched padding and a single toggle controlling both.
  • Fix: Delete the duplicate Span Events accordion item at lines 326-339, keeping the contentPx-based one.
  • _{correctness, maintainability}

🔵 P3 nitpicks (2)

• packages/app/src/components/DBRowOverviewPanel.tsx:344 -- The Span Links section still uses hardcoded ps="md"/px="md" instead of contentPx, so in the flush trace-detail layout it stays inset while sibling sections align flush with the tab bar.

  • Fix: Replace the hardcoded "md" on the Span Links Text and Box with contentPx.

• packages/app/src/components/HyperJson.module.scss:200 -- word-wrap: anywhere is not a valid value for the legacy word-wrap property (only normal/break-word) and is redundant with the correct overflow-wrap: anywhere on the next line.

  • Fix: Remove the word-wrap: anywhere declaration and rely on overflow-wrap: anywhere.

---

Reviewers (4): correctness, maintainability, frontend-races, testing (analysis performed by reading the PR head; diff-based fan-out unavailable in this environment).

Testing gaps:

• No automated test covers the new layout toggle (trace-detail-layout-toggle), its hdx_trace_detail_layout persistence, or the attribute wrap-mode behavior; coverage currently relies on the manual preview smoke steps only.

[elizabetdev]

LGTM! 🎉

Love the layout toggle.

Nitpick: I think we can remove the inline padding so the content starts aligned with the tabs.

Also, should the attribute keys wrap and have a max width? That might help prevent the layout from stretching with longer keys.

[teeohhem]

@karl-power deferring to you for the nitpicks in this PR or a follow on. Thanks!

[greptile-apps]

Greptile Summary

This PR updates the trace span detail UI. The main changes are:

• Long span attribute values and keys wrap more reliably.
• The span detail panel can move between side and bottom layouts.
• The layout choice is persisted in local storage.
• Span detail tab content is aligned flush with the tab bar.
• Unit coverage was added for the layout toggle and JSON wrapping markers.

Confidence Score: 4/5

This is close, but the trace layout should be fixed before merging.

• The bottom detail layout can still leave the waterfall with no usable height.
• The trace rows can disappear when the detail panel is resized upward or the viewport is short.

packages/app/src/components/DBTracePanel.tsx

Important Files Changed

Filename	Overview
packages/app/src/components/DBTracePanel.tsx	Adds the persisted layout toggle and split-panel behavior, but the bottom layout still lets the waterfall lose usable height.
packages/app/src/components/DBRowOverviewPanel.tsx	Adds flush alignment support for the span detail overview content.
packages/app/src/components/DBRowDataPanel.tsx	Adds flush alignment support for the parsed row data panel.
packages/app/src/components/HyperJson.module.scss	Updates key and value wrapping styles for long unbroken attributes.
packages/app/styles/ResizablePanel.module.scss	Adds a vertical inline resize handle for the bottom detail layout.

_{Reviews (4): Last reviewed commit: "fix(traces): align span detail content w..." | Re-trigger Greptile}

[kodiakhq]

This PR currently has a merge conflict. Please resolve this and then re-add the automerge label.