Browse Source

fix: add padding around error boundary Card for consistent layout

ErrorBoundary replaces Layout.Content when catching errors, so the
Card has no outer padding. Wrap in a div with padding: 24 to match
the ProLayout content area spacing.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
pull/11756/head
afc163 5 months ago
parent
commit
8519663594
  1. 72
      src/components/ErrorBoundary/index.tsx

72
src/components/ErrorBoundary/index.tsx

@ -27,40 +27,44 @@ function renderErrorFallback(
const isChunkError = isChunkLoadError(error);
return (
<Card variant="borderless">
<Result
status="error"
title={intl.formatMessage({
id: isChunkError ? 'app.error.chunk.title' : 'app.error.render.title',
defaultMessage: isChunkError
? 'Failed to load page'
: 'Something went wrong',
})}
subTitle={intl.formatMessage({
id: getSubTitleId(isChunkError, isOffline),
defaultMessage:
isChunkError && isOffline
? 'Your network connection has been lost. Please check your connection and refresh.'
: isChunkError
? 'Page resources failed to load. Please refresh and try again.'
: 'Sorry, an error occurred on this page. Please refresh or go back to the home page.',
})}
extra={[
<Button type="primary" key="retry" onClick={onRetry}>
{intl.formatMessage({
id: 'app.error.retry',
defaultMessage: 'Refresh',
})}
</Button>,
<Button href="/" key="home">
{intl.formatMessage({
id: 'app.error.home',
defaultMessage: 'Back Home',
})}
</Button>,
]}
/>
</Card>
<div style={{ padding: 24 }}>
<Card variant="borderless">
<Result
status="error"
title={intl.formatMessage({
id: isChunkError
? 'app.error.chunk.title'
: 'app.error.render.title',
defaultMessage: isChunkError
? 'Failed to load page'
: 'Something went wrong',
})}
subTitle={intl.formatMessage({
id: getSubTitleId(isChunkError, isOffline),
defaultMessage:
isChunkError && isOffline
? 'Your network connection has been lost. Please check your connection and refresh.'
: isChunkError
? 'Page resources failed to load. Please refresh and try again.'
: 'Sorry, an error occurred on this page. Please refresh or go back to the home page.',
})}
extra={[
<Button type="primary" key="retry" onClick={onRetry}>
{intl.formatMessage({
id: 'app.error.retry',
defaultMessage: 'Refresh',
})}
</Button>,
<Button href="/" key="home">
{intl.formatMessage({
id: 'app.error.home',
defaultMessage: 'Back Home',
})}
</Button>,
]}
/>
</Card>
</div>
);
}

Loading…
Cancel
Save