feat(issue-details): Update graph section on streamlined issue details (#96125)

updates the graph section to have better distinction between the graph
,search, and tags preview

before:
<img width="1330" height="205" alt="Screenshot 2025-07-23 at 9 54 37 AM"
src="https://github.com/user-attachments/assets/cb276cd7-657e-4cc5-9029-228c056d5efe"
/>


after:
<img width="1136" height="221" alt="Screenshot 2025-07-23 at 9 54 52 AM"
src="https://github.com/user-attachments/assets/51b49bc0-2438-4732-8d28-059f673cc95c"
/>

Author: roggenkemper

static/app/views/issueDetails/metricIssues/metricIssueChart.tsx

@@ -5,7 +5,6 @@ import {useChartZoom} from 'sentry/components/charts/useChartZoom';
 import {Alert} from 'sentry/components/core/alert';
 import Placeholder from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -158,17 +157,18 @@ function MetricIssuePlaceholder({type}: {type: 'loading' | 'error'}) {
 
 const MetricChartSection = styled('div')`
   display: block;
-  padding-right: ${space(1.5)};
+  padding-right: ${p => p.theme.space.lg};
+  padding-left: ${p => p.theme.space.lg};
   width: 100%;
 `;
 
 const PlaceholderContainer = styled('div')`
-  padding: ${space(1)} 0;
+  padding: ${p => p.theme.space.md} 0;
 `;
 
 const ChartContainer = styled('div')`
   position: relative;
-  padding: ${space(0.75)} 0;
+  padding: ${p => p.theme.space.sm} 0;
 `;
 
 const MetricChartAlert = styled(Alert)`

static/app/views/issueDetails/streamline/eventDetailsHeader.tsx

@@ -3,14 +3,12 @@ import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
-import {Flex} from 'sentry/components/core/layout';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import {TimeRangeSelector} from 'sentry/components/timeRangeSelector';
 import {getRelativeSummary} from 'sentry/components/timeRangeSelector/utils';
 import {TourElement} from 'sentry/components/tours/components';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
@@ -113,58 +111,55 @@ export function EventDetailsHeader({group, event, project}: EventDetailsHeaderPr
             )}
             position="bottom-start"
           >
-            <FilterContainer>
-              <EnvironmentSelector group={group} event={event} project={project} />
-              <DateFilter
-                menuTitle={t('Filter Time Range')}
-                start={period?.start}
-                end={period?.end}
-                utc={location.query.utc === 'true'}
-                relative={period?.statsPeriod}
-                relativeOptions={props => {
-                  return {
-                    ...props.arbitraryOptions,
-                    // Always display arbitrary issue open period
-                    ...(defaultStatsPeriod?.statsPeriod
-                      ? {
-                          [defaultStatsPeriod.statsPeriod]: t(
-                            '%s (since first seen)',
-                            getRelativeSummary(defaultStatsPeriod.statsPeriod)
-                          ),
-                        }
-                      : {}),
-                    ...props.defaultOptions,
-                  };
-                }}
-                onChange={({relative, start, end, utc}) => {
-                  navigate({
-                    ...location,
-                    query: {
-                      ...location.query,
-                      // If selecting the issue open period, remove the stats period query param
-                      statsPeriod:
-                        relative === defaultStatsPeriod?.statsPeriod
-                          ? undefined
-                          : relative,
-                      start: start ? getUtcDateString(start) : undefined,
-                      end: end ? getUtcDateString(end) : undefined,
-                      utc: utc ? 'true' : undefined,
-                    },
-                  });
-                }}
-                triggerLabel={
-                  period === defaultStatsPeriod && !defaultStatsPeriod.isMaxRetention
-                    ? t('Since First Seen')
-                    : undefined
-                }
-                triggerProps={{
-                  borderless: true,
-                  style: {
-                    borderRadius: 0,
-                  },
-                }}
-              />
-              <Flex gap="xs">
+            <FilterSection>
+              <FilterContainer>
+                <EnvironmentSelector group={group} event={event} project={project} />
+                <DateFilter
+                  menuTitle={t('Filter Time Range')}
+                  start={period?.start}
+                  end={period?.end}
+                  utc={location.query.utc === 'true'}
+                  relative={period?.statsPeriod}
+                  relativeOptions={props => {
+                    return {
+                      ...props.arbitraryOptions,
+                      // Always display arbitrary issue open period
+                      ...(defaultStatsPeriod?.statsPeriod
+                        ? {
+                            [defaultStatsPeriod.statsPeriod]: t(
+                              '%s (since first seen)',
+                              getRelativeSummary(defaultStatsPeriod.statsPeriod)
+                            ),
+                          }
+                        : {}),
+                      ...props.defaultOptions,
+                    };
+                  }}
+                  onChange={({relative, start, end, utc}) => {
+                    navigate({
+                      ...location,
+                      query: {
+                        ...location.query,
+                        // If selecting the issue open period, remove the stats period query param
+                        statsPeriod:
+                          relative === defaultStatsPeriod?.statsPeriod
+                            ? undefined
+                            : relative,
+                        start: start ? getUtcDateString(start) : undefined,
+                        end: end ? getUtcDateString(end) : undefined,
+                        utc: utc ? 'true' : undefined,
+                      },
+                    });
+                  }}
+                  triggerLabel={
+                    period === defaultStatsPeriod && !defaultStatsPeriod.isMaxRetention
+                      ? t('Since First Seen')
+                      : undefined
+                  }
+                  triggerProps={{
+                    borderless: true,
+                  }}
+                />
                 <SearchFilter
                   group={group}
                   handleSearch={query => {
@@ -181,9 +176,9 @@ export function EventDetailsHeader({group, event, project}: EventDetailsHeaderPr
                     label: searchText,
                   }}
                 />
-                <ToggleSidebar />
-              </Flex>
-            </FilterContainer>
+              </FilterContainer>
+              <ToggleSidebar />
+            </FilterSection>
           </TourElement>
         )}
         {issueTypeConfig.header.graph.enabled && (
@@ -227,8 +222,8 @@ function EnvironmentSelector({group, event, project}: EventDetailsHeaderProps) {
     display: block;
     &:before {
       right: 0;
-      top: ${space(1)};
-      bottom: ${space(1)};
+      top: ${theme.space.md};
+      bottom: ${theme.space.md};
       width: 1px;
       content: '';
       position: absolute;
@@ -250,9 +245,6 @@ function EnvironmentSelector({group, event, project}: EventDetailsHeaderProps) {
       css={environmentCss}
       triggerProps={{
         borderless: true,
-        style: {
-          borderRadius: 0,
-        },
       }}
     />
   );
@@ -261,33 +253,46 @@ function EnvironmentSelector({group, event, project}: EventDetailsHeaderProps) {
 const DetailsContainer = styled('div')<{
   hasFilterBar: boolean;
 }>`
-  padding-left: 24px;
+  position: relative;
   display: flex;
   flex-direction: column;
-  border: 0px solid ${p => p.theme.translucentBorder};
-  border-width: 0 1px 1px 0;
+  gap: ${p => p.theme.space.md};
+  background: ${p => p.theme.backgroundSecondary};
+  padding-left: ${p => p.theme.space.lg};
+  padding-right: ${p => p.theme.space.lg};
+  padding-top: ${p => p.theme.space.md};
+
+  @media (min-width: ${p => p.theme.breakpoints.lg}) {
+    border-right: 1px solid ${p => p.theme.translucentBorder};
+  }
+`;
+const FilterSection = styled('div')`
+  display: flex;
+  gap: ${p => p.theme.space.xs};
 `;
 
 const FilterContainer = styled('div')`
   display: grid;
   grid-template-columns: auto auto minmax(100px, 1fr) auto;
   grid-template-rows: minmax(38px, auto);
   width: 100%;
+  background: ${p => p.theme.background};
+  border-radius: ${p => p.theme.borderRadius};
+  border: 1px solid ${p => p.theme.translucentBorder};
 `;
 
 const SearchFilter = styled(EventSearch)`
   display: block;
   border-color: transparent;
-  border-radius: 0;
   box-shadow: none;
 `;
 
 const DateFilter = styled(TimeRangeSelector)`
   display: block;
   &:before {
     right: 0;
-    top: ${space(1)};
-    bottom: ${space(1)};
+    top: ${p => p.theme.space.md};
+    bottom: ${p => p.theme.space.md};
     width: 1px;
     content: '';
     position: absolute;
@@ -297,24 +302,26 @@ const DateFilter = styled(TimeRangeSelector)`
 
 const GraphSection = styled('div')`
   display: flex;
-  &:not(:first-child) {
-    border-top: 1px solid ${p => p.theme.translucentBorder};
+  gap: ${p => p.theme.space.md};
+  & > * {
+    background: ${p => p.theme.background};
+    border-radius: ${p => p.theme.borderRadius};
+    border: 1px solid ${p => p.theme.translucentBorder};
   }
 `;
 
 const OccurrenceSummarySection = styled(OccurrenceSummary)`
   white-space: unset;
-  padding: ${space(1)};
-  padding-left: 0;
-  &:not(:first-child) {
-    border-top: 1px solid ${p => p.theme.translucentBorder};
-  }
+  background: ${p => p.theme.background};
+  padding: ${p => p.theme.space.lg};
+  border-radius: ${p => p.theme.borderRadius};
+  border: 1px solid ${p => p.theme.translucentBorder};
 `;
 
 const PageErrorBoundary = styled(ErrorBoundary)`
   margin: 0;
   border: 0px solid ${p => p.theme.translucentBorder};
   border-width: 0 1px 1px 0;
   border-radius: 0;
-  padding: ${space(1.5)} 24px;
+  padding: ${p => p.theme.space.lg} ${p => p.theme.space['2xl']};
 `;

static/app/views/issueDetails/streamline/eventGraph.tsx

@@ -626,22 +626,18 @@ const GraphWrapper = styled('div')`
 
 const SummaryContainer = styled('div')`
   display: flex;
-  gap: ${p => (p.theme.isChonk ? space(0.75) : space(0.5))};
+  gap: ${p => (p.theme.isChonk ? p.theme.space.sm : p.theme.space.xs)};
   flex-direction: column;
-  margin: ${space(1)} ${space(0.25)} ${space(1)} 0;
+  margin: ${p => p.theme.space.md};
   border-radius: ${p => p.theme.borderRadius} 0 0 ${p => p.theme.borderRadius};
-
-  @media (min-width: ${p => p.theme.breakpoints.xl}) {
-    margin: ${space(1)} ${space(1)} ${space(1)} 0;
-  }
 `;
 
 const CalloutButton = withChonk(
   styled(Button)<{isActive: boolean}>`
     cursor: ${p => (p.isActive ? 'initial' : 'pointer')};
     border: 1px solid ${p => (p.isActive ? p.theme.purple100 : 'transparent')};
     background: ${p => (p.isActive ? p.theme.purple100 : 'transparent')};
-    padding: ${space(0.5)} ${space(2)};
+    padding: ${p => p.theme.space.xs} ${p => p.theme.space.xl};
     box-shadow: none;
     height: unset;
     overflow: hidden;
@@ -666,31 +662,31 @@ const Label = styled('div')<{isActive: boolean}>`
 
 const Count = styled('div')<{isActive: boolean}>`
   line-height: 1;
-  margin-top: ${space(0.5)};
+  margin-top: ${p => p.theme.space.xs};
   font-size: 20px;
   font-weight: ${p => p.theme.fontWeight.normal};
   color: ${p => (p.isActive ? p.theme.purple400 : p.theme.textColor)};
 `;
 
 const ChartContainer = styled('div')`
   position: relative;
-  padding: ${space(0.75)} 0 ${space(0.75)} 0;
+  padding: ${p => p.theme.space.sm} 0 ${p => p.theme.space.sm} 0;
   margin-right: -2px;
 
   @media (min-width: ${p => p.theme.breakpoints.xl}) {
-    padding: ${space(0.75)} ${space(1)} ${space(0.75)} 0;
+    padding: ${p => p.theme.space.sm} ${p => p.theme.space.md} ${p => p.theme.space.sm} 0;
   }
 `;
 
 const LoadingChartContainer = styled('div')`
   position: relative;
-  padding: ${space(0.75)} 0 ${space(0.75)} 0;
-  margin: 0 ${space(1)};
+  padding: ${p => p.theme.space.sm} 0 ${p => p.theme.space.sm} 0;
+  margin: 0 ${p => p.theme.space.md};
 `;
 
 const GraphAlert = styled(Alert)`
-  padding-left: 24px;
-  margin: 0 0 0 -24px;
+  padding-left: ${p => p.theme.space['2xl']};
+  margin: 0 0 0 -${p => p.theme.space['2xl']};
   border: 0;
   border-radius: 0;
 `;

static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx

@@ -12,7 +12,6 @@ import type {StatsBucket} from 'sentry/components/checkInTimeline/types';
 import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {tct} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import {useApiQuery} from 'sentry/utils/queryClient';
@@ -204,15 +203,17 @@ const ChartContainer = styled('div')<{envCount: number}>`
   position: relative;
   width: 100%;
   min-height: ${p => Math.max(p.envCount - 1, 0) * totalHeight + 104}px;
+  padding-left: ${p => p.theme.space.lg};
+  padding-right: ${p => p.theme.space.lg};
 `;
 
 const TimelineLegend = styled('div')`
   position: absolute;
-  width: 100%;
+  width: calc(100% - ${p => p.theme.space.lg} * 2);
   user-select: none;
   display: flex;
-  gap: ${space(1)};
-  margin-top: ${space(1.5)};
+  gap: ${p => p.theme.space.md};
+  margin-top: ${p => p.theme.space.lg};
 `;
 
 const TimelineLegendText = styled('div')`
@@ -223,7 +224,9 @@ const TimelineLegendText = styled('div')`
 const TimelineContainer = styled('div')`
   position: absolute;
   top: 36px;
-  width: 100%;
+  left: ${p => p.theme.space.lg};
+  right: ${p => p.theme.space.lg};
+  width: calc(100% - ${p => p.theme.space.lg} * 2);
 `;
 
 const EnvironmentLabel = styled(Tooltip)`
@@ -244,4 +247,5 @@ const IssueGridLineOverlay = styled(GridLineOverlay)<{envCount: number}>`
   ${Gridline} {
     top: ${p => Math.max(p.envCount - 1, 0) * totalHeight + 68}px;
   }
+  width: calc(100% - ${p => p.theme.space.lg} * 2);
 `;