Improve Span Details Panel UI and Functionality per design #76
Conversation
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
- Fixed span details header and search bar - Matched spacing and colouring in details
Enhances the visual presentation of the span details panel by adjusting font weights and adding padding to the accordion component, improving readability and overall user experience.
The changes include: - Adding padding to the accordion component. - Adjusting the background color of rows in the table. - Adding a close button to the span details panel. - Updating the search input placeholder text. - Changing the span detail headers to uppercase and light font.
Improves the contrast of table rows in dark mode by changing the alternating background color from a dark gray to white.
Improves the visual separation of the span overlay drawer from the content below it. The drawer now includes a top border, making it easier to distinguish the drawer's boundaries. This enhances the user interface by providing clearer visual cues.
Adds `whitespace-nowrap` to span details to prevent text wrapping, improving readability. Adjusts the background color of the span overlay drawer for better contrast. Improves vertical spacing in span details
nojaf
reviewed
Aug 14, 2025
| <input type="text" placeholder="Search" value={search} onChange={(e) => setSearch(e.target.value)} /> | ||
| <table className="w-full"> | ||
| <div className="z-10 overflow-hidden text-sm"> | ||
| <div className="px-2 py-2"> |
There was a problem hiding this comment.
Do a search and replace on this, we have it elsewhere as well.
| /> | ||
| </div> | ||
| </div> | ||
| <div className="px-4"> |
There was a problem hiding this comment.
Why add an extra div here? If it only has a single child, why not add the padding there?
There was a problem hiding this comment.
This one is so we can extend the line from end to end of a panel. With padding, that line is broken by the padding width
| /> | ||
| </div> | ||
| </div> | ||
| <div className="px-4"> |
There was a problem hiding this comment.
Ensure this align better with the accordeon sections:
The scrollbar is over the copy button.
nojaf
approved these changes
Aug 14, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Improves the Span Details Panel with the following changes: