fix(dashboards): Add padding around big number actions in Project Det…

…ails (#79993) Fixes a regression introduced in #79676. Adds a container around widget actions.
getsentry · Oct 30, 2024 · 1587e29 · 1587e29
1 parent 17fffdf
commit 1587e29
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/static/app/views/projectDetail/projectScoreCards/actionWrapper.tsx b/static/app/views/projectDetail/projectScoreCards/actionWrapper.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+import {space} from 'sentry/styles/space';
+
+export const ActionWrapper = styled('div')`
+  padding: ${space(2)};
+`;
diff --git a/static/app/views/projectDetail/projectScoreCards/projectApdexScoreCard.tsx b/static/app/views/projectDetail/projectScoreCards/projectApdexScoreCard.tsx
@@ -13,6 +13,8 @@ import {getTermHelp, PerformanceTerm} from 'sentry/views/performance/data';
 
 import MissingPerformanceButtons from '../missingFeatureButtons/missingPerformanceButtons';
 
+import {ActionWrapper} from './actionWrapper';
+
 type Props = {
   isProjectStabilized: boolean;
   organization: Organization;
@@ -114,7 +116,9 @@ function ProjectApdexScoreCard(props: Props) {
   if (!hasTransactions || !organization.features.includes('performance-view')) {
     return (
       <WidgetFrame title={cardTitle} description={cardHelp}>
-        <MissingPerformanceButtons organization={organization} />
+        <ActionWrapper>
+          <MissingPerformanceButtons organization={organization} />
+        </ActionWrapper>
       </WidgetFrame>
     );
   }

diff --git a/static/app/views/projectDetail/projectScoreCards/projectStabilityScoreCard.tsx b/static/app/views/projectDetail/projectScoreCards/projectStabilityScoreCard.tsx
@@ -21,6 +21,8 @@ import {
 
 import MissingReleasesButtons from '../missingFeatureButtons/missingReleasesButtons';
 
+import {ActionWrapper} from './actionWrapper';
+
 type Props = {
   field:
     | SessionFieldWithOperation.CRASH_FREE_RATE_SESSIONS
@@ -135,11 +137,13 @@ function ProjectStabilityScoreCard(props: Props) {
   if (hasSessions === false) {
     return (
       <WidgetFrame title={cardTitle} description={cardHelp}>
-        <MissingReleasesButtons
-          organization={organization}
-          health
-          platform={props.project?.platform}
-        />
+        <ActionWrapper>
+          <MissingReleasesButtons
+            organization={organization}
+            health
+            platform={props.project?.platform}
+          />
+        </ActionWrapper>
       </WidgetFrame>
     );
   }

diff --git a/static/app/views/projectDetail/projectScoreCards/projectVelocityScoreCard.tsx b/static/app/views/projectDetail/projectScoreCards/projectVelocityScoreCard.tsx
@@ -11,6 +11,8 @@ import {WidgetFrame} from 'sentry/views/dashboards/widgets/common/widgetFrame';
 
 import MissingReleasesButtons from '../missingFeatureButtons/missingReleasesButtons';
 
+import {ActionWrapper} from './actionWrapper';
+
 const API_LIMIT = 1000;
 
 type Release = {date: string; version: string};
@@ -147,7 +149,9 @@ function ProjectVelocityScoreCard(props: Props) {
   if (!isLoading && noReleaseEver) {
     return (
       <WidgetFrame title={cardTitle} description={cardHelp}>
-        <MissingReleasesButtons organization={organization} />
+        <ActionWrapper>
+          <MissingReleasesButtons organization={organization} />
+        </ActionWrapper>
       </WidgetFrame>
     );
   }