fix(insights): Fix agents trace table horizontal overflow and empty state layout#110843
Merged
priscilawebdev merged 4 commits intomasterfrom Mar 18, 2026
Merged
Conversation
…tate layout Use COL_WIDTH_UNDEFINED for the agents column instead of a hardcoded 600px width, skip the CellExpander hack in frameless/dashboard mode, remove fit: max-content to prevent forced overflow, and ensure the table body fills remaining vertical space for proper empty state centering. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
bot
added
the
Scope: Frontend
priscilawebdev
commented
Mar 17, 2026
| const TableWrapper = styled('div')` | ||
| margin-top: ${p => p.theme.space.lg}; | ||
| min-height: 0; | ||
| flex: 1; |
Member
Author
There was a problem hiding this comment.
this fixes the table not taking up the whole available vertical space.
| const additionalGridProps = frameless | ||
| ? { | ||
| bodyStyle: FRAMELESS_STYLES, | ||
| fit: 'max-content' as const, |
Member
Author
There was a problem hiding this comment.
removing this allows the columns to shrink
| export const DEFAULT_TRACES_TABLE_WIDTHS = [110, 600, 140, 110, 110, 110, 120, 110, 110]; | ||
| export const DEFAULT_TRACES_TABLE_WIDTHS = [ | ||
| 110, | ||
| COL_WIDTH_UNDEFINED, |
Member
Author
There was a problem hiding this comment.
If this is set to 600, the table becomes wider than its container and no longer fits. This should be flexible.
Comment on lines
+102
to
+104
| &:has(> thead + tbody) { | ||
| grid-template-rows: auto 1fr; | ||
| } |
Member
Author
There was a problem hiding this comment.
Without this, the header stretches as well, but only the content should.
gggritso
approved these changes
Mar 17, 2026
priscilawebdev
deleted the
priscilawebdev/fix/agents-trace-table-overflow
branch
JonasBa
pushed a commit
that referenced
this pull request
Mar 18, 2026
…tate layout (#110843) When the platformized AI agents overview is enabled, the traces table had a horizontal scrollbar due to hardcoded column widths (the agents column was fixed at 600px). This fixes the overflow by: - Using `COL_WIDTH_UNDEFINED` for the agents column so it fills available space instead of a fixed 600px - Removing `fit: max-content` which prevented the table from fitting its container Additionally fixes the empty state ("No results") layout where the message appeared at the top of the widget instead of being vertically centered: - `TableWrapper` now uses `flex: 1` to fill remaining vertical space in the widget card - `Grid` now sets `grid-template-rows: auto 1fr` when `height` is set and both `thead`/`tbody` are present, keeping the header compact while the body fills remaining space **Before** https://github.com/user-attachments/assets/2553c168-a69b-406e-8d06-c10fa35e9ede **After** https://github.com/user-attachments/assets/f1c88a11-e2a3-4c48-8c1e-c4bdaa09d090 closes https://linear.app/getsentry/issue/TET-2081/agent-monitoring-dashboard-horizontal-scrollbar-on-table --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When the platformized AI agents overview is enabled, the traces table had a horizontal scrollbar due to hardcoded column widths (the agents column was fixed at 600px).
This fixes the overflow by:
COL_WIDTH_UNDEFINEDfor the agents column so it fills available space instead of a fixed 600pxfit: max-contentwhich prevented the table from fitting its containerAdditionally fixes the empty state ("No results") layout where the message appeared at the top of the widget instead of being vertically centered:
TableWrappernow usesflex: 1to fill remaining vertical space in the widget cardGridnow setsgrid-template-rows: auto 1frwhenheightis set and boththead/tbodyare present, keeping the header compact while the body fills remaining spaceBefore
Screen.Recording.2026-03-17.at.13.31.48.mov
After
Screen.Recording.2026-03-17.at.13.43.47.mov
closes https://linear.app/getsentry/issue/TET-2081/agent-monitoring-dashboard-horizontal-scrollbar-on-table