KingDEV95 · pull · Mar 19, 2026 · Mar 19, 2026
diff --git a/static/app/views/dashboards/widgetCard/widgetFrame.tsx b/static/app/views/dashboards/widgetCard/widgetFrame.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {Badge} from '@sentry/scraps/badge';
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
@@ -150,7 +151,15 @@ export function WidgetFrame(props: WidgetFrameProps) {
           )}
         </Fragment>
       }
-      Visualization={props.error ? <Widget.WidgetError error={error} /> : props.children}
+      Visualization={
+        props.error ? (
+          <Container position="absolute" inset={0}>
+            <Widget.WidgetError error={error} />
+          </Container>
+        ) : (
+          props.children
+        )
+      }
       noVisualizationPadding={props.noVisualizationPadding}
     />
   );

diff --git a/static/app/views/dashboards/widgets/widget/widget.stories.tsx b/static/app/views/dashboards/widgets/widget/widget.stories.tsx
@@ -246,7 +246,11 @@ function InsightsLineChart() {
             </Button>
           </Widget.WidgetToolbar>
         }
-        Visualization={<Widget.WidgetError error={error} />}
+        Visualization={
+          <Container position="absolute" inset={0}>
+            <Widget.WidgetError error={error} />
+          </Container>
+        }
       />
     );
   }
@@ -260,9 +264,11 @@ function InsightsLineChart() {
       <Widget
         Title={Title}
         Visualization={
-          <Widget.WidgetError
-            error={'No data! This is unusual, consider contacting support'}
-          />
+          <Container position="absolute" inset={0}>
+            <Widget.WidgetError
+              error={'No data! This is unusual, consider contacting support'}
+            />
+          </Container>
         }
       />
     );

diff --git a/static/app/views/dashboards/widgets/widget/widget.tsx b/static/app/views/dashboards/widgets/widget/widget.tsx
@@ -2,7 +2,7 @@ import {Fragment} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Flex} from '@sentry/scraps/layout';
+import {Container, Flex} from '@sentry/scraps/layout';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {defined} from 'sentry/utils';
@@ -85,17 +85,25 @@ function WidgetLayout(props: Widget) {
       {props.Visualization && (
         <VisualizationWrapper noPadding={props.noVisualizationPadding}>
           <ErrorBoundary
-            customComponent={({error}) => {
-              return <WidgetError error={error ?? undefined} />;
-            }}
+            customComponent={({error}) => (
+              <Container position="absolute" inset={0}>
+                <WidgetError error={error ?? undefined} />
+              </Container>
+            )}
           >
             {props.Visualization}
           </ErrorBoundary>
         </VisualizationWrapper>
       )}
 
       {props.Footer && (
-        <FooterWrapper noPadding={props.noFooterPadding}>{props.Footer}</FooterWrapper>
+        <FooterWrapper noPadding={props.noFooterPadding}>
+          <ErrorBoundary
+            customComponent={({error}) => <WidgetError error={error ?? undefined} />}
+          >
+            {props.Footer}
+          </ErrorBoundary>
+        </FooterWrapper>
       )}
     </Frame>
   );

diff --git a/static/app/views/dashboards/widgets/widget/widgetError.tsx b/static/app/views/dashboards/widgets/widget/widgetError.tsx
@@ -27,13 +27,10 @@ export function WidgetError({error}: WidgetErrorProps) {
   );
 }
 
-const Panel = styled('div')<{height?: string}>`
-  container-type: size;
+const Panel = styled('div')`
+  container-type: inline-size;
   container-name: error-panel;
 
-  position: absolute;
-  inset: 0;
-
   padding: ${p => p.theme.space.lg} ${p => p.theme.space.xl};
 
   display: flex;

diff --git a/static/app/views/explore/components/chart/chartVisualization.tsx b/static/app/views/explore/components/chart/chartVisualization.tsx
@@ -3,6 +3,8 @@ import {useMemo} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {TransparentLoadingMask} from 'sentry/components/charts/transparentLoadingMask';
 import type {ChartXRangeSelectionProps} from 'sentry/components/charts/useChartXRangeSelection';
 import {t} from 'sentry/locale';
@@ -94,14 +96,22 @@ export function ChartVisualization({
   }
 
   if (chartInfo.timeseriesResult.error) {
-    return <Widget.WidgetError error={chartInfo.timeseriesResult.error} />;
+    return (
+      <Container position="absolute" inset={0}>
+        <Widget.WidgetError error={chartInfo.timeseriesResult.error} />
+      </Container>
+    );
   }
 
   if (plottables.length === 0) {
     // This happens when the `/events-stats/` endpoint returns a blank
     // response. This is a rare error condition that happens when
     // proxying to RPC. Adding explicit handling with a "better" message
-    return <Widget.WidgetError error={t('No data')} />;
+    return (
+      <Container position="absolute" inset={0}>
+        <Widget.WidgetError error={t('No data')} />
+      </Container>
+    );
   }
 
   return (

diff --git a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx
@@ -2,6 +2,7 @@ import type {Theme} from '@emotion/react';
 import {useTheme} from '@emotion/react';
 
 import {Button} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 
 import {openInsightChartModal} from 'sentry/actionCreators/modal';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
@@ -186,7 +187,11 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
       <ChartContainer height={props.height}>
         <Widget
           Title={Title}
-          Visualization={<Widget.WidgetError error={props.error} />}
+          Visualization={
+            <Container position="absolute" inset={0}>
+              <Widget.WidgetError error={props.error} />
+            </Container>
+          }
         />
       </ChartContainer>
     );
@@ -199,7 +204,11 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
       <ChartContainer height={props.height}>
         <Widget
           Title={Title}
-          Visualization={<Widget.WidgetError error={MISSING_DATA_MESSAGE} />}
+          Visualization={
+            <Container position="absolute" inset={0}>
+              <Widget.WidgetError error={MISSING_DATA_MESSAGE} />
+            </Container>
+          }
         />
       </ChartContainer>
     );

diff --git a/...ic/app/views/insights/mobile/appStarts/components/charts/deviceClassBreakdownBarChart.tsx b/...ic/app/views/insights/mobile/appStarts/components/charts/deviceClassBreakdownBarChart.tsx
@@ -1,6 +1,7 @@
 import {useTheme} from '@emotion/react';
 
 import {Button} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 
 import {openInsightChartModal} from 'sentry/actionCreators/modal';
 import {BarChart} from 'sentry/components/charts/barChart';
@@ -131,7 +132,14 @@ export function DeviceClassBreakdownBarChart({
   if (error) {
     return (
       <ChartContainer height={chartHeight}>
-        <Widget Title={Title} Visualization={<Widget.WidgetError error={error} />} />
+        <Widget
+          Title={Title}
+          Visualization={
+            <Container position="absolute" inset={0}>
+              <Widget.WidgetError error={error} />
+            </Container>
+          }
+        />
       </ChartContainer>
     );
   }

diff --git a/static/app/views/insights/mobile/screenload/components/charts/screenBarChart.tsx b/static/app/views/insights/mobile/screenload/components/charts/screenBarChart.tsx
@@ -1,6 +1,7 @@
 import {useTheme} from '@emotion/react';
 
 import {Button} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 
 import {openInsightChartModal} from 'sentry/actionCreators/modal';
 import {BarChart} from 'sentry/components/charts/barChart';
@@ -96,7 +97,14 @@ export function ScreensBarChart({
   if (error) {
     return (
       <ChartContainer height={chartHeight}>
-        <Widget Title={Title} Visualization={<Widget.WidgetError error={error} />} />
+        <Widget
+          Title={Title}
+          Visualization={
+            <Container position="absolute" inset={0}>
+              <Widget.WidgetError error={error} />
+            </Container>
+          }
+        />
       </ChartContainer>
     );
   }

diff --git a/static/app/views/insights/pages/platform/laravel/widgetVisualizationStates.tsx b/static/app/views/insights/pages/platform/laravel/widgetVisualizationStates.tsx
@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import {WidgetEmptyStateWarning} from 'sentry/views/performance/landing/widgets/components/selectableList';
 
@@ -26,7 +28,11 @@ export function WidgetVisualizationStates<T extends WidgetVisualization>({
     return <VisualizationType.LoadingPlaceholder />;
   }
   if (error) {
-    return <Widget.WidgetError error={error} />;
+    return (
+      <Container position="absolute" inset={0}>
+        <Widget.WidgetError error={error} />
+      </Container>
+    );
   }
   if (isEmpty) {
     return emptyMessage ? emptyMessage : <WidgetEmptyStateWarning />;

diff --git a/static/app/views/projectDetail/projectScoreCards/projectApdexScoreCard.tsx b/static/app/views/projectDetail/projectScoreCards/projectApdexScoreCard.tsx
@@ -1,4 +1,5 @@
 import {Button} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 
 import {shouldFetchPreviousPeriod} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
@@ -155,7 +156,11 @@ export function ProjectApdexScoreCard(props: Props) {
             </Button>
           </Widget.WidgetToolbar>
         }
-        Visualization={<Widget.WidgetError error={error} />}
+        Visualization={
+          <Container position="absolute" inset={0}>
+            <Widget.WidgetError error={error} />
+          </Container>
+        }
       />
     );
   }

diff --git a/static/app/views/projectDetail/projectScoreCards/projectStabilityScoreCard.tsx b/static/app/views/projectDetail/projectScoreCards/projectStabilityScoreCard.tsx
@@ -1,4 +1,5 @@
 import {Button} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 
 import {getInterval, shouldFetchPreviousPeriod} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
@@ -182,7 +183,11 @@ export function ProjectStabilityScoreCard(props: Props) {
             </Button>
           </Widget.WidgetToolbar>
         }
-        Visualization={<Widget.WidgetError error={error} />}
+        Visualization={
+          <Container position="absolute" inset={0}>
+            <Widget.WidgetError error={error} />
+          </Container>
+        }
       />
     );
   }

diff --git a/static/app/views/projectDetail/projectScoreCards/projectVelocityScoreCard.tsx b/static/app/views/projectDetail/projectScoreCards/projectVelocityScoreCard.tsx
@@ -1,4 +1,5 @@
 import {Button} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 
 import {shouldFetchPreviousPeriod} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
@@ -195,7 +196,11 @@ export function ProjectVelocityScoreCard(props: Props) {
             </Button>
           </Widget.WidgetToolbar>
         }
-        Visualization={<Widget.WidgetError error={error} />}
+        Visualization={
+          <Container position="absolute" inset={0}>
+            <Widget.WidgetError error={error} />
+          </Container>
+        }
       />
     );
   }