Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aryunewaskar77-art wants to merge 10 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cb2ff1f
fix(ui): resolve text overlapping on resize in trace comparison
aryunewaskar77-art Feb 5, 2026
b72eef7
Merge branch 'main' into fix/text-overlap-on-resize
aryunewaskar77-art Feb 5, 2026
004c5c6
fix(ui): allow text truncation by removing min-width constraint
aryunewaskar77-art Feb 5, 2026
6b2ef91
fix(ui): allow text truncation by removing min-width constraint
aryunewaskar77-art Feb 5, 2026
ed93661
chore: remove incidental yarn.lock from PR
aryunewaskar77-art Feb 6, 2026
dd7ef6c
Merge branch 'main' into fix/text-overlap-on-resize
aryunewaskar77-art Feb 7, 2026
4a91c68
Update packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/Tr…
aryunewaskar77-art Feb 7, 2026
c3785fb
Merge branch 'main' into fix/text-overlap-on-resize
aryunewaskar77-art Feb 13, 2026
3a4300d
Merge branch 'main' into fix/text-overlap-on-resize
aryunewaskar77-art Feb 20, 2026
3999cbb
Merge branch 'main' into fix/text-overlap-on-resize
aryunewaskar77-art Mar 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions jaeger-uiAryu
Open in desktop
Submodule jaeger-uiAryu added at d77506
10 changes: 8 additions & 2 deletions packages/jaeger-ui/src/components/App/Branding.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,28 @@ SPDX-License-Identifier: Apache-2.0
display: flex;
align-items: center;
height: 100%;
flex-shrink: 0;
gap: 6px;
padding-right: 12px;
}

.Branding--logo {
height: 40px;
width: auto;
margin-top: 4px;
margin-right: 6px;
flex-shrink: 0;
}

.Branding--name {
font-size: 20px;
font-weight: 500;
margin-top: -4px;
color: var(--text-inverse);
line-height: 1;
line-height: 1.2;
letter-spacing: -0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.Branding:hover .Branding--name {
Expand Down
39 changes: 39 additions & 0 deletions packages/jaeger-ui/src/components/App/TopNav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ SPDX-License-Identifier: Apache-2.0
flex-direction: row;
align-items: center;
justify-content: center;
white-space: nowrap;
}

.Dropdown--icon-container:hover {
Expand All @@ -36,3 +37,41 @@ SPDX-License-Identifier: Apache-2.0
.Menu--item.ant-menu-item-selected .ant-menu-title-content a {
color: #fff;
}

/* Prevent text overlap on resize */
.Menu--item.ant-menu {
overflow: hidden;
gap: 4px;
}

.Menu--item .ant-menu-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
margin-inline: 2px;
}

.Menu--item .ant-menu-title-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* Ensure the right menu doesn't shrink too much */
.ant-menu-horizontal {
border-bottom: none;
gap: 8px;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
.Dropdown--icon-container {
margin-right: 15px;
}

.Menu--item .ant-menu-item {
padding-inline: 8px;
}
}
6 changes: 3 additions & 3 deletions packages/jaeger-ui/src/components/App/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export function TopNavImpl(props: Props) {
];

return (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Menu
theme="dark"
items={itemsGlobalLeft?.concat(
Expand All @@ -152,7 +152,7 @@ export function TopNavImpl(props: Props) {
mode="horizontal"
selectable={false}
selectedKeys={[pathname]}
style={{ flex: '1 1 0', minWidth: 0 }}
style={{ flex: '1 1 auto', minWidth: 0 }}
/>
<Menu
theme="dark"
Expand All @@ -162,7 +162,7 @@ export function TopNavImpl(props: Props) {
selectable={false}
disabledOverflow
selectedKeys={[pathname]}
style={{ flex: '0 1 auto', minWidth: 0 }}
style={{ flex: '0 0 auto' }}
/>
</div>
);
Expand Down
15 changes: 15 additions & 0 deletions packages/jaeger-ui/src/components/App/TraceIDSearchInput.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,21 @@ SPDX-License-Identifier: Apache-2.0

.TraceIDSearchInput--form {
line-height: inherit;
min-width: 200px;
max-width: 400px;
width: 100%;
gap: 4px;
}

.TraceIDSearchInput--input {
width: 100%;
min-width: 200px;
}

.TraceIDSearchInput--input .ant-input {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

/* Dark styling for header search - nav is always dark */
Expand Down
3 changes: 3 additions & 0 deletions packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceDiffHeader.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,16 @@ SPDX-License-Identifier: Apache-2.0
width: 50px;
background: var(--surface-tertiary);
border-right: 1px solid var(--border-default);
white-space: nowrap;
}

.TraceDiffHeader--label {
margin: 0;
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
}

.TraceDiffHeader--traceSection {
Expand Down
33 changes: 20 additions & 13 deletions packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,30 @@ SPDX-License-Identifier: Apache-2.0
.TraceDiffHeader--traceTitle {
align-items: center;
display: flex;
justify-content: space-between;
flex: 1;
font-size: 1.7em;
margin: 0;
padding: 0.25rem 2.5rem 0.25rem 1.25rem;
position: relative;
padding: 0.25rem 1.25rem;
min-height: 2.5em;
min-width: 0;
overflow: hidden;
gap: 1rem;
}

.TraceDiffHeader--traceTitleText {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Comment on lines +32 to 37
Copy link

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.

.TraceDiffHeader--traceTitleActions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
Comment thread
aryunewaskar77-art marked this conversation as resolved.
}
.TraceDiffHeader--traceTitle > span {
display: inline;
max-width: 100%;
Comment on lines 45 to 47
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
Comment on lines 45 to 47
Copy link

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
Expand All @@ -41,23 +57,14 @@ SPDX-License-Identifier: Apache-2.0
white-space: normal;
}

.TraceDiffHeader--traceTitle.is-error {
color: var(--feedback-error);
.TraceDiffHeader--traceTitleText span {
display: inline;
}

.TraceDiffHeader--traceTitleChevron {
color: var(--interactive-primary);
font-size: 0.75em;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s ease;
flex-shrink: 0;
}

.TraceDiffHeader--traceSection:hover .TraceDiffHeader--traceTitleChevron {
transform: translateY(calc(-50% + 2px));
}

.TraceDiffHeader--traceAttributes {
Expand Down
10 changes: 6 additions & 4 deletions packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,18 +81,20 @@ export default function TraceHeader({
return (
<div className="TraceDiffHeader--traceHeader" data-testid="TraceDiffHeader--traceHeader">
<h1 className="TraceDiffHeader--traceTitle">
<span>
<div className="TraceDiffHeader--traceTitleText">
Comment on lines 82 to +84
Copy link

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
{traceID ? (
<React.Fragment>
<TraceName key="name" traceName={traceName} error={error} state={state} />{' '}
<TraceId key="id" traceId={traceID} className="ub-pr2" />
<TraceTimelineLink traceID={traceID} />
</React.Fragment>
) : (
<span className="u-tx-muted">Select a Trace...</span>
)}
</span>
<IoChevronDown className="TraceDiffHeader--traceTitleChevron" />
</div>
<div className="TraceDiffHeader--traceTitleActions">
{traceID && <TraceTimelineLink traceID={traceID} />}
<IoChevronDown className="TraceDiffHeader--traceTitleChevron" />
</div>
</h1>
Comment on lines +93 to 98
Copy link

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
<AttrsComponent startTime={startTime} duration={duration} totalSpans={totalSpans} />
</div>
Expand Down
Loading