fix(compass-components): improve Error details modal UX (COMPASS-10474)#7901
Open
cursor[bot] wants to merge 10 commits intomainfrom
Open
fix(compass-components): improve Error details modal UX (COMPASS-10474)#7901cursor[bot] wants to merge 10 commits intomainfrom
cursor[bot] wants to merge 10 commits intomainfrom
Conversation
- Add 16px (spacing[400]) padding above the JSON code block - Set modal max-height: 90vh so Back button stays visible - Make JSON area scroll internally via overflow: auto - Wire className through showConfirmation for Error details-specific styles
…revert use-confirmation changes - Revert className changes from shared use-confirmation helper - Keep padding, overflow, maxHeight only in use-error-details.tsx wrapper
Contributor
Author
|
Cursor Agent can help with this pull request. Just |
cursor
bot
force-pushed
the
cursor/error-details-modal-ux-8d61
branch
from
fa6b2d9 to
833dc78
Compare
… stays visible Restore maxHeight on the description wrapper only (not modal); overflow:auto needs a bounded height so the JSON scrolls inside and the footer stays on-screen.
…e for footer Use calc(100vh - 280px) so header + padded modal + footer fit; 180px was too small on short viewports. Add minHeight:0 for flex overflow behavior.
… - 180px) Revert to the agreed local-only styling (paddingTop, overflow, maxHeight).
…ll + visible footer COMPASS-10474: padding above JSON, maxHeight 60vh, overflow auto — local to use-error-details only.
paula-stacho
approved these changes
Mar 25, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Improves the Compass Components “Error details” confirmation modal UX for long JSON payloads by adding spacing above the JSON and constraining the JSON area to scroll rather than expanding the modal.
Changes:
- Added an emotion class that applies top padding, a
60vhmax height, andoverflow: autoto the Error details content container. - Wrapped the JSON
<Code>block in a styled<div>so long JSON scrolls within the modal content area.
As per copilot suggestion
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
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.
From Compass Ticket -
Author : @misbamongo & dev support from @paula-stacho
Summary
Improves the Error details modal UX when displaying long JSON content by adding proper spacing above the JSON and making the JSON area scroll instead of expanding the whole modal.
Changes
1. Header → editor spacing
spacing[400]) padding above the JSONCodeblock.2. Scrollable JSON area
Codeblock in a container with:paddingTop: spacing[400]maxHeight: '60vh'overflow: 'auto'Implementation approach
use-error-details.tsx.use-confirmation.tsxor other shared helpers/components.Testing
compass-componentstests pass (397 passing).