From 9c54ae41d4aa721b2a0275d4709cb6b9652cdae9 Mon Sep 17 00:00:00 2001 From: misbamongo Date: Tue, 24 Mar 2026 13:45:03 +0000 Subject: [PATCH 1/8] fix(compass-components): improve Error details modal UX (COMPASS-10474) - 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 --- .../src/hooks/use-confirmation.tsx | 2 ++ .../src/hooks/use-error-details.tsx | 33 +++++++++++++++---- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx index c6ef0f325e0..549ae854d12 100644 --- a/packages/compass-components/src/hooks/use-confirmation.tsx +++ b/packages/compass-components/src/hooks/use-confirmation.tsx @@ -26,6 +26,7 @@ type ConfirmationProperties = Partial< | 'requiredInputText' | 'initialFocus' | 'confirmButtonProps' + | 'className' > > & { buttonText?: React.ReactNode; @@ -190,6 +191,7 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({ open={confirmationProps.open} title={confirmationProps.title ?? 'Are you sure?'} variant={confirmationProps.variant ?? ConfirmationModalVariant.Default} + className={confirmationProps.className} confirmButtonProps={{ id: confirmationProps.hideCancelButton ? initialFocusId : undefined, className: confirmationProps.hideConfirmButton diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx index 238f76fc509..1292eac20f5 100644 --- a/packages/compass-components/src/hooks/use-error-details.tsx +++ b/packages/compass-components/src/hooks/use-error-details.tsx @@ -1,7 +1,23 @@ import { showConfirmation } from './use-confirmation'; import { Code, ConfirmationModalVariant } from '../components/leafygreen'; +import { css } from '@leafygreen-ui/emotion'; +import { spacing } from '@leafygreen-ui/tokens'; import React from 'react'; +const errorDetailsModalClassName = css({ + maxHeight: '90vh', + display: 'flex', + flexDirection: 'column', + overflow: 'hidden', +}); + +const errorDetailsContentClassName = css({ + paddingTop: spacing[400], + overflow: 'auto', + flex: 1, + minHeight: 0, +}); + export const showErrorDetails = function showErrorDetails({ details, closeAction, @@ -12,16 +28,19 @@ export const showErrorDetails = function showErrorDetails({ void showConfirmation({ title: 'Error details', description: ( - - {JSON.stringify(details, undefined, 2)} - +
+ + {JSON.stringify(details, undefined, 2)} + +
), hideCancelButton: true, buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()), variant: ConfirmationModalVariant.Default, + className: errorDetailsModalClassName, }); }; From dcbf6aecea88be9a07ddfa425527ca7f09e02de4 Mon Sep 17 00:00:00 2001 From: misbamongo Date: Tue, 24 Mar 2026 14:50:35 +0000 Subject: [PATCH 2/8] refactor(compass-components): keep Error details modal styles local, revert use-confirmation changes - Revert className changes from shared use-confirmation helper - Keep padding, overflow, maxHeight only in use-error-details.tsx wrapper --- .../compass-components/src/hooks/use-confirmation.tsx | 2 -- .../src/hooks/use-error-details.tsx | 11 +---------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx index 549ae854d12..c6ef0f325e0 100644 --- a/packages/compass-components/src/hooks/use-confirmation.tsx +++ b/packages/compass-components/src/hooks/use-confirmation.tsx @@ -26,7 +26,6 @@ type ConfirmationProperties = Partial< | 'requiredInputText' | 'initialFocus' | 'confirmButtonProps' - | 'className' > > & { buttonText?: React.ReactNode; @@ -191,7 +190,6 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({ open={confirmationProps.open} title={confirmationProps.title ?? 'Are you sure?'} variant={confirmationProps.variant ?? ConfirmationModalVariant.Default} - className={confirmationProps.className} confirmButtonProps={{ id: confirmationProps.hideCancelButton ? initialFocusId : undefined, className: confirmationProps.hideConfirmButton diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx index 1292eac20f5..8fdf5f73f46 100644 --- a/packages/compass-components/src/hooks/use-error-details.tsx +++ b/packages/compass-components/src/hooks/use-error-details.tsx @@ -4,18 +4,10 @@ import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; import React from 'react'; -const errorDetailsModalClassName = css({ - maxHeight: '90vh', - display: 'flex', - flexDirection: 'column', - overflow: 'hidden', -}); - const errorDetailsContentClassName = css({ paddingTop: spacing[400], overflow: 'auto', - flex: 1, - minHeight: 0, + maxHeight: 'calc(90vh - 180px)', }); export const showErrorDetails = function showErrorDetails({ @@ -41,6 +33,5 @@ export const showErrorDetails = function showErrorDetails({ hideCancelButton: true, buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()), variant: ConfirmationModalVariant.Default, - className: errorDetailsModalClassName, }); }; From 833dc78fb06d8a220af3c35f81cdf33924c2439f Mon Sep 17 00:00:00 2001 From: misbamongo Date: Tue, 24 Mar 2026 14:54:43 +0000 Subject: [PATCH 3/8] chore: remove maxHeight from Error details modal wrapper --- packages/compass-components/src/hooks/use-error-details.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx index 8fdf5f73f46..89895e20ab1 100644 --- a/packages/compass-components/src/hooks/use-error-details.tsx +++ b/packages/compass-components/src/hooks/use-error-details.tsx @@ -7,7 +7,6 @@ import React from 'react'; const errorDetailsContentClassName = css({ paddingTop: spacing[400], overflow: 'auto', - maxHeight: 'calc(90vh - 180px)', }); export const showErrorDetails = function showErrorDetails({ From 035cdfb10840d7e41a1503900d1144b9872506a3 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 24 Mar 2026 18:57:21 +0000 Subject: [PATCH 4/8] fix(compass-components): cap Error details JSON height so Back button 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. --- packages/compass-components/src/hooks/use-error-details.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx index 89895e20ab1..a4b3af416a7 100644 --- a/packages/compass-components/src/hooks/use-error-details.tsx +++ b/packages/compass-components/src/hooks/use-error-details.tsx @@ -7,6 +7,8 @@ import React from 'react'; const errorDetailsContentClassName = css({ paddingTop: spacing[400], overflow: 'auto', + // Cap description height so the modal footer (Back) stays in view; not modal-level — local to this wrapper only. + maxHeight: 'calc(90vh - 180px)', }); export const showErrorDetails = function showErrorDetails({ From 3c851f34accc94736af328889981a70161432cfa Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 24 Mar 2026 19:05:01 +0000 Subject: [PATCH 5/8] fix(compass-components): increase Error details JSON maxHeight reserve 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. --- packages/compass-components/src/hooks/use-error-details.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx index a4b3af416a7..481bdd636cf 100644 --- a/packages/compass-components/src/hooks/use-error-details.tsx +++ b/packages/compass-components/src/hooks/use-error-details.tsx @@ -7,8 +7,10 @@ import React from 'react'; const errorDetailsContentClassName = css({ paddingTop: spacing[400], overflow: 'auto', - // Cap description height so the modal footer (Back) stays in view; not modal-level — local to this wrapper only. - maxHeight: 'calc(90vh - 180px)', + minHeight: 0, + // Reserve ~280px for dialog padding, title, and footer so total modal height stays within the viewport. + // (A smaller subtract like 180px let header + JSON + footer exceed 100vh, so the whole modal scrolled.) + maxHeight: 'calc(100vh - 280px)', }); export const showErrorDetails = function showErrorDetails({ From 6da59d462a8f6ce842ed5e7436b3472a3a701a36 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 24 Mar 2026 19:14:29 +0000 Subject: [PATCH 6/8] chore(compass-components): restore Error details wrapper to calc(90vh - 180px) Revert to the agreed local-only styling (paddingTop, overflow, maxHeight). --- packages/compass-components/src/hooks/use-error-details.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx index 481bdd636cf..8fdf5f73f46 100644 --- a/packages/compass-components/src/hooks/use-error-details.tsx +++ b/packages/compass-components/src/hooks/use-error-details.tsx @@ -7,10 +7,7 @@ import React from 'react'; const errorDetailsContentClassName = css({ paddingTop: spacing[400], overflow: 'auto', - minHeight: 0, - // Reserve ~280px for dialog padding, title, and footer so total modal height stays within the viewport. - // (A smaller subtract like 180px let header + JSON + footer exceed 100vh, so the whole modal scrolled.) - maxHeight: 'calc(100vh - 280px)', + maxHeight: 'calc(90vh - 180px)', }); export const showErrorDetails = function showErrorDetails({ From ba2ce09978f12e5ef728b9bc04bf22d2b85ea1b7 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 24 Mar 2026 19:34:05 +0000 Subject: [PATCH 7/8] fix(compass-components): cap Error details JSON area at 60vh for scroll + visible footer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit COMPASS-10474: padding above JSON, maxHeight 60vh, overflow auto — local to use-error-details only. --- packages/compass-components/src/hooks/use-error-details.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx index 8fdf5f73f46..4f0c7f1a1fb 100644 --- a/packages/compass-components/src/hooks/use-error-details.tsx +++ b/packages/compass-components/src/hooks/use-error-details.tsx @@ -5,9 +5,9 @@ import { spacing } from '@leafygreen-ui/tokens'; import React from 'react'; const errorDetailsContentClassName = css({ - paddingTop: spacing[400], - overflow: 'auto', - maxHeight: 'calc(90vh - 180px)', + paddingTop: spacing[400], // small gap above JSON + maxHeight: '60vh', // cap JSON area height so footer can stay visible + overflow: 'auto', // scroll JSON when long }); export const showErrorDetails = function showErrorDetails({ From 89bdfb9cf969e4e0536cf99b58979fb9da4ec865 Mon Sep 17 00:00:00 2001 From: misbamongo <126422116+misbamongo@users.noreply.github.com> Date: Wed, 25 Mar 2026 17:34:20 +0100 Subject: [PATCH 8/8] Rename errorDetailsContentClassName to errorDetailsContentStyles As per copilot suggestion --- packages/compass-components/src/hooks/use-error-details.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx index 4f0c7f1a1fb..89e2550ebcf 100644 --- a/packages/compass-components/src/hooks/use-error-details.tsx +++ b/packages/compass-components/src/hooks/use-error-details.tsx @@ -4,7 +4,7 @@ import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; import React from 'react'; -const errorDetailsContentClassName = css({ +const errorDetailsContentStyles = css({ paddingTop: spacing[400], // small gap above JSON maxHeight: '60vh', // cap JSON area height so footer can stay visible overflow: 'auto', // scroll JSON when long @@ -20,7 +20,7 @@ export const showErrorDetails = function showErrorDetails({ void showConfirmation({ title: 'Error details', description: ( -
+