fix(issue-details): Fix alignment of issue details header (#97010)

fixes align of issue details header
fixes
https://linear.app/getsentry/issue/RTC-1107/fix-alignment-of-eventuser-count-buttons

Author: roggenkemper

static/app/components/events/highlights/highlightsIconSummary.tsx

@@ -236,7 +236,7 @@ function EnvironmentHighlight({environmentTag}: {environmentTag: EventTag | unde
 
 const IconBar = styled('div')`
   position: relative;
-  padding: 0 ${space(0.5)};
+  padding: 0;
 `;
 
 const IconContainer = styled('div')`

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

@@ -52,6 +52,7 @@ export function EventDetailsHeader({group, event, project}: EventDetailsHeaderPr
   const organization = useOrganization();
   const navigate = useNavigate();
   const location = useLocation();
+  const theme = useTheme();
   const environments = useEnvironmentsFromUrl();
   const searchQuery = useEventQuery({groupId: group.id});
   const issueTypeConfig = getConfigForIssueType(group, project);
@@ -158,6 +159,9 @@ export function EventDetailsHeader({group, event, project}: EventDetailsHeaderPr
                   }
                   triggerProps={{
                     borderless: true,
+                    style: {
+                      padding: `${theme.space.md} ${theme.space.lg}`,
+                    },
                   }}
                 />
                 <SearchFilter
@@ -213,10 +217,10 @@ export function EventDetailsHeader({group, event, project}: EventDetailsHeaderPr
 }
 
 function EnvironmentSelector({group, event, project}: EventDetailsHeaderProps) {
-  const theme = useTheme();
   const issueTypeConfig = getConfigForIssueType(group, project);
   const isFixedEnvironment = issueTypeConfig.header.filterBar.fixedEnvironment;
   const eventEnvironment = event?.tags?.find(tag => tag.key === 'environment')?.value;
+  const theme = useTheme();
 
   const environmentCss = css`
     display: block;
@@ -245,6 +249,9 @@ function EnvironmentSelector({group, event, project}: EventDetailsHeaderProps) {
       css={environmentCss}
       triggerProps={{
         borderless: true,
+        style: {
+          padding: `${theme.space.md} ${theme.space.lg}`,
+        },
       }}
     />
   );
@@ -256,11 +263,11 @@ const DetailsContainer = styled('div')<{
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: ${p => p.theme.space.md};
+  gap: ${p => p.theme.space.lg};
   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};
+  padding-left: ${p => p.theme.space['2xl']};
+  padding-right: ${p => p.theme.space['2xl']};
+  padding-top: ${p => p.theme.space.lg};
 
   @media (min-width: ${p => p.theme.breakpoints.lg}) {
     border-right: 1px solid ${p => p.theme.translucentBorder};
@@ -302,7 +309,7 @@ const DateFilter = styled(TimeRangeSelector)`
 
 const GraphSection = styled('div')`
   display: flex;
-  gap: ${p => p.theme.space.md};
+  gap: ${p => p.theme.space.lg};
   & > * {
     background: ${p => p.theme.background};
     border-radius: ${p => p.theme.borderRadius};

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

@@ -628,7 +628,7 @@ const SummaryContainer = styled('div')`
   display: flex;
   gap: ${p => (p.theme.isChonk ? p.theme.space.sm : p.theme.space.xs)};
   flex-direction: column;
-  margin: ${p => p.theme.space.md};
+  margin: ${p => p.theme.space.lg};
   border-radius: ${p => p.theme.borderRadius} 0 0 ${p => p.theme.borderRadius};
 `;
 

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

@@ -13,7 +13,6 @@ import {ScrollCarousel} from 'sentry/components/scrollCarousel';
 import TimeSince from 'sentry/components/timeSince';
 import {IconCopy, IconWarning} from 'sentry/icons';
 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 {trackAnalytics} from 'sentry/utils/analytics';
@@ -273,40 +272,40 @@ const StyledTimeSince = styled(TimeSince)`
 
 const EventInfoJumpToWrapper = styled('div')<{hasProcessingError: boolean}>`
   display: grid;
-  gap: ${space(1)};
+  gap: ${p => p.theme.space.md};
   grid-template-columns: 1fr auto;
   align-items: center;
-  padding: 0 ${space(2)};
+  padding: 0 ${p => p.theme.space.lg};
   min-height: ${MIN_NAV_HEIGHT}px;
   border-bottom: 1px solid ${p => p.theme.translucentBorder};
 
   @media (max-width: ${p =>
       p.hasProcessingError ? p.theme.breakpoints.lg : p.theme.breakpoints.sm}) {
     grid-template-columns: 1fr;
-    gap: ${space(0.5)};
-    padding: ${space(0.5)} ${space(2)};
+    gap: ${p => p.theme.space.xs};
+    padding: ${p => p.theme.space.xs} ${p => p.theme.space.xl};
   }
 `;
 
 const EventInfo = styled('div')`
   display: flex;
-  gap: ${space(0.75)};
+  gap: ${p => p.theme.space.sm};
   flex-direction: row;
   align-items: center;
   line-height: 1.2;
 
   @media (max-width: ${p => p.theme.breakpoints.sm}) {
-    padding-top: ${space(1)};
+    padding-top: ${p => p.theme.space.md};
   }
 `;
 
 const JumpToLabel = styled('div')`
-  margin-top: ${space(0.25)};
+  margin-top: ${p => p.theme.space['2xs']};
 `;
 
 const JumpTo = styled('div')`
   display: flex;
-  gap: ${space(0.5)};
+  gap: ${p => p.theme.space.xs};
   flex-direction: row;
   align-items: center;
   color: ${p => p.theme.subText};
@@ -327,7 +326,7 @@ const ProcessingErrorButton = styled(Button)`
 const JsonLinkWrapper = styled('div')`
   display: flex;
   align-items: center;
-  gap: ${space(0.5)};
+  gap: ${p => p.theme.space.xs};
 `;
 
 const JsonLink = styled(ExternalLink)`
@@ -362,7 +361,7 @@ const MarkdownButton = styled('button')`
 
 const EventIdWrapper = styled('div')`
   display: flex;
-  gap: ${space(0.25)};
+  gap: ${p => p.theme.space['2xs']};
   align-items: center;
   font-weight: ${p => p.theme.fontWeight.bold};
   white-space: nowrap;

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

@@ -132,8 +132,8 @@ const NavigationSidebarWrapper = withChonk(
     display: flex;
     padding: ${p =>
       p.hasToggleSidebar
-        ? `${space(1)} 0 ${space(0.5)} ${space(1.5)}`
-        : `10px ${space(1.5)} ${space(0.25)} ${space(1.5)}`};
+        ? `${p.theme.space.md} 0 ${p.theme.space.sm} ${p.theme.space['2xl']}`
+        : `${p.theme.space.sm} ${p.theme.space['2xl']} ${p.theme.space.xs} ${p.theme.space['2xl']}`};
   `,
   chonkStyled('div')<{
     hasToggleSidebar: boolean;
@@ -143,12 +143,13 @@ const NavigationSidebarWrapper = withChonk(
     gap: ${space(0.5)};
     padding: ${p =>
       p.hasToggleSidebar
-        ? `${space(1)} 0 ${space(0.5)} ${space(1.5)}`
-        : `10px ${space(1.5)} ${space(0.25)} ${space(1.5)}`};
+        ? `${p.theme.space.md} 0 ${p.theme.space.sm} ${p.theme.space['2xl']}`
+        : `${p.theme.space.sm} ${p.theme.space['2xl']} ${p.theme.space.xs} ${p.theme.space['2xl']}`};
   `
 );
 
 const ContentPadding = styled('div')`
   min-height: 100vh;
-  padding: 0 ${space(1.5)} ${space(1.5)} ${space(1.5)};
+  padding: 0 ${p => p.theme.space['2xl']} ${p => p.theme.space['2xl']}
+    ${p => p.theme.space['2xl']};
 `;

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

@@ -121,7 +121,7 @@ export default function StreamlinedGroupHeader({
       <Header>
         <Flex justify="between">
           <Flex align="center" gap="md">
-            <Breadcrumbs
+            <StyledBreadcrumbs
               crumbs={[
                 {
                   label: 'Issues',
@@ -314,7 +314,7 @@ export default function StreamlinedGroupHeader({
 
 const Header = styled('header')`
   background-color: ${p => p.theme.background};
-  padding: ${space(1)} 24px;
+  padding: ${p => p.theme.space.md} ${p => p.theme.space['2xl']};
 `;
 
 const HeaderGrid = styled('div')`
@@ -419,6 +419,10 @@ const Title = styled('div')`
   column-gap: ${p => p.theme.space.sm};
 `;
 
+const StyledBreadcrumbs = styled(Breadcrumbs)`
+  padding: 0;
+`;
+
 const StyledTag = styled(Tag)`
   @media (max-width: ${p => p.theme.breakpoints.xs}) {
     display: none;

static/app/views/issueDetails/streamline/sidebar/toggleSidebar.tsx

@@ -45,7 +45,7 @@ export function ToggleSidebar({size = 'lg'}: {size?: 'lg' | 'sm'}) {
 const ToggleContainer = styled('div')<{sidebarOpen: boolean}>`
   width: ${p => (p.theme.isChonk ? undefined : p.sidebarOpen ? '30px' : '50px')};
   position: relative;
-  margin-right: -${p => p.theme.space.lg};
+  margin-right: -${p => p.theme.space['2xl']};
   @media (max-width: ${p => p.theme.breakpoints.lg}) {
     display: none;
   }