Browse Source

ref(crons): Fix spacing between env labels and timeline (#57862)

Spacing here regressed with changes to the timeline view, such as adding
the action menu (`...` button) to delete individual environments

Fixed:
- Padding around `Show X More` button
- Timeline now properly aligned with environment label

Before:
<img width="1245" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/cc38c48b-a387-43a9-ba80-aa3966530994">
<img width="622" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/5b0ae0ac-25b4-4a25-9e76-0e1722dab5af">


After:
<img width="1245" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/9e4f6da2-e9fb-41d2-aa6a-d27e184de2a5">
<img width="616" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/f261b495-35ff-405f-adf9-3a0100ab745c">

Fixes: https://github.com/getsentry/team-crons/issues/96
David Wang 1 year ago
parent
commit
8bf95716c4

+ 0 - 1
static/app/views/monitors/components/cronDetailsTimeline.tsx

@@ -103,7 +103,6 @@ export function CronDetailsTimeline({monitor, organization}: Props) {
 const TimelineContainer = styled(Panel)`
   display: grid;
   grid-template-columns: 135px 1fr;
-  align-items: center;
 `;
 
 const StyledGridLineTimeLabels = styled(GridLineTimeLabels)`

+ 3 - 2
static/app/views/monitors/components/overviewTimeline/timelineTableRow.tsx

@@ -176,7 +176,8 @@ const Schedule = styled('small')`
 
 const MonitorEnvContainer = styled('div')`
   display: flex;
-  padding: 0 ${space(2)};
+  padding: ${space(3)} ${space(2)};
+  gap: ${space(4)};
   flex-direction: column;
   border-right: 1px solid ${p => p.theme.innerBorder};
   text-align: right;
@@ -191,6 +192,7 @@ const EnvWithStatus = styled('div')`
   display: flex;
   gap: ${space(0.5)};
   align-items: center;
+  height: calc(${p => p.theme.fontSizeLarge} * ${p => p.theme.text.lineHeightHeading});
 
   &:hover ${EnvActionButton} {
     display: block;
@@ -203,7 +205,6 @@ const MonitorEnvLabel = styled('div')<{status: MonitorStatus}>`
   white-space: nowrap;
   flex: 1;
 
-  padding: ${space(2)} 0;
   color: ${p => p.theme[statusIconColorMap[p.status].color]};
 `;