fix(ui): resolve text overlapping on resize in trace comparison by aryunewaskar77-art · Pull Request #3505 · jaegertracing/jaeger-ui

aryunewaskar77-art · 2026-02-05T16:02:15Z

This PR fixes a UI issue in the Trace Comparison page where text overlaps when the browser window is resized to smaller widths.

The overlapping text made the comparison view hard to read during responsive resizing. The update ensures that text and layout adjust correctly across different screen sizes.

What changed :

Fixed CSS/layout behavior to prevent text overlapping on resize
No functional or behavioral changes beyond layout correction

Before :

After :

How this was tested :

Opened Trace Comparison page locally
Resized the browser window across different widths
3 .Verified text no longer overlaps and layout remains readable

Signed-off-by: aryunewaskar77-art <aryu.newaskar77@gmail.com>

github-actions · 2026-02-05T16:04:04Z

Hi @aryunewaskar77-art, thanks for your contribution! To ensure quality reviews, we limit how many concurrent open PRs new contributors can open.

This PR is currently on hold (Status: 2/1 open). We will automatically move this into the review queue once your existing PRs are merged or closed.

Please see our Contributing Guidelines for details on our tiered quota policy.

graphite-app · 2026-02-05T16:08:54Z

+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: fit-content;


Conflicting CSS properties: min-width: fit-content prevents the element from shrinking below its content width, which contradicts overflow: hidden and text-overflow: ellipsis on lines 31-32. The ellipsis will never show because the element won't shrink to trigger overflow.

Fix: Remove this line:

- min-width: fit-content;

Or if minimum width is needed, use a fixed pixel value:

min-width: 80px; /* or appropriate minimum */

Suggested change

min-width: fit-content;

min-width: 80px; /* allow truncation while maintaining minimum width */

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

Signed-off-by: aryunewaskar77-art <aryu.newaskar77@gmail.com>

github-actions · 2026-02-06T07:59:38Z

PR quota unlocked! @aryunewaskar77-art, this PR has been moved out of the waiting room and into the active review queue. Thank you for your patience.

Current Status: 1/1 open.

emphor11 · 2026-02-06T14:17:10Z

@aryunewaskar77-art

While reviewing the diff, I noticed that most of the LOC increase comes from updates to yarn.lock. Since this PR focuses on UI/layout behavior, can you confirm whether the lockfile change was intentional?

If it was incidental (e.g. local yarn install/version differences), reverting it would significantly reduce noise and make the PR easier to review.

Signed-off-by: aryunewaskar77-art <aryu.newaskar77@gmail.com>

aryunewaskar77-art · 2026-02-06T15:09:49Z

Thanks for flagging this — yarn.lock was added incidentally during local setup and isn’t part of upstream. I’ve removed it from the PR to keep the change focused on the UI fix.

yurishkuro

the main issue is resolved by #3401. How are the other changes here (to App/*) related to the issue?

aryunewaskar77-art · 2026-02-07T02:59:18Z

In order to make it a permanent solution, I added that when resized to small size the text will be shortened till it can be and the rest will be "..."

Signed-off-by: Aaryaa Newaskar <aryu.newaskar77@gmail.com>

…aceHeader.css Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: Aaryaa Newaskar <aryu.newaskar77@gmail.com>

github-actions · 2026-02-09T05:34:05Z

PR quota unlocked! @aryunewaskar77-art, this PR has been moved out of the waiting room and into the active review queue. Thank you for your patience.

Current Status: 1/1 open.

Copilot

Pull request overview

This PR resolves a UI issue where text elements overlap when resizing the browser window on the Trace Comparison page. The changes introduce responsive CSS styling and restructured layout components to ensure text properly truncates with ellipsis and layout elements maintain proper spacing across different screen sizes.

Changes:

Restructured TraceHeader component to separate title text from action buttons, enabling independent flex behavior
Added responsive CSS rules including text-overflow, white-space, and flex properties to prevent overlapping
Updated TopNav flex properties and alignment for better responsive behavior

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx	Restructured JSX to separate trace title text and action elements into distinct divs for independent layout control
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.css	Added new CSS classes and properties to handle text overflow, ellipsis, and flexible layout behavior
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceDiffHeader.css	Added white-space and overflow properties to prevent text wrapping and clipping
packages/jaeger-ui/src/components/App/TraceIDSearchInput.css	Added width constraints and text-overflow handling for the trace ID search input
packages/jaeger-ui/src/components/App/TopNav.tsx	Updated flex properties and added alignItems for improved responsive navigation layout
packages/jaeger-ui/src/components/App/TopNav.css	Added comprehensive responsive CSS rules including media queries for smaller screens
packages/jaeger-ui/src/components/App/Branding.css	Added flex-shrink, white-space, and text-overflow properties to prevent branding text from causing layout issues
jaeger-uiAryu	New submodule commit reference added

Comments suppressed due to low confidence (1)

jaeger-uiAryu:1

This appears to be an accidental commit of a submodule file with an unusual name 'jaeger-uiAryu'. This file should not be part of a UI layout fix PR and should be removed from the commit.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-13T06:50:23Z

 .TraceDiffHeader--traceTitle > span {
  display: inline;
  max-width: 100%;


The CSS selector .TraceDiffHeader--traceTitle > span targets direct child span elements, but the JSX was changed to use div elements instead. This rule may now be unused or ineffective since there are no longer direct span children of .TraceDiffHeader--traceTitle.

Copilot

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

jaeger-uiAryu:1

This new top-level file looks like an accidental submodule/gitlink artifact (a lone Subproject commit ... line). If this repo is not intentionally adding a new submodule pointer named jaeger-uiAryu, please remove it from the PR; otherwise, add context in the PR description and ensure the repository’s submodule configuration reflects it.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-04T09:41:52Z

    <div className="TraceDiffHeader--traceHeader" data-testid="TraceDiffHeader--traceHeader">
      <h1 className="TraceDiffHeader--traceTitle">
-        <span>
+        <div className="TraceDiffHeader--traceTitleText">


Invalid heading markup: an h1 element should not contain div (flow content). This can break HTML semantics and some assistive tech behavior. Prefer using span/strong (phrasing content) wrappers inside the h1, or move the flex layout container outside the h1 (e.g., make the flex wrapper a div and keep the h1 for text only).

Copilot · 2026-03-04T09:41:53Z

+        </div>
+        <div className="TraceDiffHeader--traceTitleActions">
+          {traceID && <TraceTimelineLink traceID={traceID} />}
+          <IoChevronDown className="TraceDiffHeader--traceTitleChevron" />
+        </div>
      </h1>


Invalid heading markup: an h1 element should not contain div (flow content). This can break HTML semantics and some assistive tech behavior. Prefer using span/strong (phrasing content) wrappers inside the h1, or move the flex layout container outside the h1 (e.g., make the flex wrapper a div and keep the h1 for text only).

Copilot · 2026-03-04T09:41:53Z

+.TraceDiffHeader--traceTitleText {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }


For flex children, text truncation with ellipsis commonly fails unless the flex item is allowed to shrink below its content size. Add min-width: 0; to .TraceDiffHeader--traceTitleText so the ellipsis reliably triggers and the title can shrink without pushing/overlapping adjacent actions.

Copilot · 2026-03-04T09:41:53Z

 .TraceDiffHeader--traceTitle > span {
  display: inline;
  max-width: 100%;


This selector targets a direct child span of .TraceDiffHeader--traceTitle, but the updated markup no longer renders a direct span child (it now uses .TraceDiffHeader--traceTitleText / .TraceDiffHeader--traceTitleActions). Update the selector to match the new structure (or remove it if no longer needed) to avoid dead/ineffective styling.

yurishkuro

what do branding and TopNav have to do with how trace diffs are styled?

fix(ui): resolve text overlapping on resize in trace comparison

cb2ff1f

Signed-off-by: aryunewaskar77-art <aryu.newaskar77@gmail.com>

aryunewaskar77-art requested a review from a team as a code owner February 5, 2026 16:02

Merge branch 'main' into fix/text-overlap-on-resize

b72eef7

github-actions Bot added the pr-quota-reached PR is on hold due to quota limits for new contributors label Feb 5, 2026

graphite-app Bot reviewed Feb 5, 2026

View reviewed changes

aryunewaskar77-art added 2 commits February 5, 2026 22:00

fix(ui): allow text truncation by removing min-width constraint

004c5c6

Signed-off-by: aryunewaskar77-art <aryu.newaskar77@gmail.com>

fix(ui): allow text truncation by removing min-width constraint

6b2ef91

Signed-off-by: aryunewaskar77-art <aryu.newaskar77@gmail.com>

github-actions Bot removed the pr-quota-reached PR is on hold due to quota limits for new contributors label Feb 6, 2026

github-actions Bot added the pr-quota-reached PR is on hold due to quota limits for new contributors label Feb 6, 2026

chore: remove incidental yarn.lock from PR

ed93661

Signed-off-by: aryunewaskar77-art <aryu.newaskar77@gmail.com>

yurishkuro requested changes Feb 6, 2026

View reviewed changes

Merge branch 'main' into fix/text-overlap-on-resize

dd7ef6c

Signed-off-by: Aaryaa Newaskar <aryu.newaskar77@gmail.com>

aryunewaskar77-art requested a review from yurishkuro February 7, 2026 04:53

graphite-app Bot reviewed Feb 7, 2026

View reviewed changes

Comment thread packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.css

Update packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/Tr…

4a91c68

…aceHeader.css Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: Aaryaa Newaskar <aryu.newaskar77@gmail.com>

github-actions Bot removed the pr-quota-reached PR is on hold due to quota limits for new contributors label Feb 9, 2026

github-actions Bot added the pr-quota-reached PR is on hold due to quota limits for new contributors label Feb 9, 2026

Merge branch 'main' into fix/text-overlap-on-resize

c3785fb

Copilot AI review requested due to automatic review settings February 13, 2026 06:48

Copilot AI reviewed Feb 13, 2026

View reviewed changes

aryunewaskar77-art added 2 commits February 20, 2026 12:46

Merge branch 'main' into fix/text-overlap-on-resize

3a4300d

Merge branch 'main' into fix/text-overlap-on-resize

3999cbb

Copilot AI review requested due to automatic review settings March 4, 2026 09:39

Copilot AI reviewed Mar 4, 2026

View reviewed changes

yurishkuro reviewed Mar 9, 2026

View reviewed changes

	min-width: fit-content;
	min-width: 80px; /* allow truncation while maintaining minimum width */

Conversation

aryunewaskar77-art commented Feb 5, 2026

Uh oh!

github-actions Bot commented Feb 5, 2026

Uh oh!

graphite-app Bot Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 6, 2026

Uh oh!

emphor11 commented Feb 6, 2026

Uh oh!

aryunewaskar77-art commented Feb 6, 2026

Uh oh!

yurishkuro left a comment

Choose a reason for hiding this comment

Uh oh!

aryunewaskar77-art commented Feb 7, 2026

Uh oh!

Uh oh!

github-actions Bot commented Feb 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

yurishkuro left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants