Browse Source

fix(crons): Add border back to non-sticky timeline header (#54770)

With the change from solid border to translucent box-shadow
https://github.com/getsentry/sentry/pull/54399/files we lost the border
for the non-sticky timeline header in the issue details page. Adds it
back in

Before:
<img width="908" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/205a14c3-b092-4815-b038-f5afe963ebcf">

After:
<img width="917" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/9ae6c602-1a24-45c1-9cd7-f511d15ab308">
David Wang 1 year ago
parent
commit
1ea6a2ee87

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

@@ -124,6 +124,7 @@ const GridLineContainer = styled('div')`
 const LabelsContainer = styled('div')`
   position: relative;
   align-self: stretch;
+  border-bottom: 1px solid ${p => p.theme.border};
 `;
 
 const Gridline = styled('div')<{left: number}>`

+ 6 - 1
static/app/views/monitors/components/overviewTimeline/index.tsx

@@ -63,7 +63,7 @@ export function OverviewTimeline({monitorList}: Props) {
         <ResolutionSelector />
       </StickyResolutionSelector>
       <StickyGridLineTimeLabels>
-        <GridLineTimeLabels
+        <BorderlessGridLineTimeLabels
           timeWindow={timeWindow}
           end={nowRef.current}
           width={timelineWidth}
@@ -112,6 +112,11 @@ const StickyResolutionSelector = styled(Sticky)`
   }
 `;
 
+// We don't need border here because it is already accomplished via box-shadow below
+const BorderlessGridLineTimeLabels = styled(GridLineTimeLabels)`
+  border: none;
+`;
+
 const StickyGridLineTimeLabels = styled(Sticky)`
   > * {
     height: 100%;