KingDEV95 · pull · May 26, 2026 · May 26, 2026 · May 26, 2026 · May 26, 2026
diff --git a/static/app/components/events/autofix/v3/artifactLoadingDetails.tsx b/static/app/components/events/autofix/v3/artifactLoadingDetails.tsx
@@ -51,7 +51,9 @@ export function ArtifactLoadingDetails({
         })}
         <Flex direction="row" gap="md">
           <StyledLoadingIndicator size={16} />
-          <Text variant="muted">{loadingMessage}</Text>
+          <Text variant="muted" density="compressed">
+            {loadingMessage}
+          </Text>
         </Flex>
       </Flex>
     </ArtifactDetails>

diff --git a/static/app/components/feedback/feedbackSetupPanel.tsx b/static/app/components/feedback/feedbackSetupPanel.tsx
@@ -25,7 +25,7 @@ export function FeedbackSetupPanel() {
     <NoMarginPanel>
       <Container>
         <IlloBox>
-          <img src={feedbackOnboardingImg} />
+          <img src={feedbackOnboardingImg} alt="" />
         </IlloBox>
         <StyledBox>
           <Fragment>

diff --git a/static/app/views/explore/conversations/components/conversationsTable.tsx b/static/app/views/explore/conversations/components/conversationsTable.tsx
@@ -118,7 +118,11 @@ function ConversationsTableInner() {
           column.name
         )}
         {column.key === 'timestamp' && <IconArrow direction="down" size="xs" />}
-        {column.key === 'inputOutput' && <CellExpander />}
+        {column.key === 'inputOutput' && (
+          // Force the cell to take as much width as possible in the table
+          // layout, otherwise GridEditable will let the last column grow.
+          <Container width="100vw" />
+        )}
       </Flex>
     );
   }, []);
@@ -362,14 +366,6 @@ const SingleLineMarkdown = styled('div')`
   }
 `;
 
-/**
- * Used to force the cell to expand take as much width as possible in the table layout
- * otherwise grid editable will let the last column grow
- */
-const CellExpander = styled('div')`
-  width: 100vw;
-`;
-
 const ConversationIdLink = styled(Link)`
   color: ${p => p.theme.tokens.interactive.link.accent.rest};
   font-weight: normal;

diff --git a/static/app/views/explore/conversations/conversationDetail.tsx b/static/app/views/explore/conversations/conversationDetail.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import {useCallback, useEffect, useMemo} from 'react';
 import {parseAsString, useQueryStates} from 'nuqs';
 

diff --git a/static/app/views/explore/conversations/onboarding.tsx b/static/app/views/explore/conversations/onboarding.tsx
@@ -6,9 +6,11 @@ import {PlatformIcon} from 'platformicons';
 import replayOnboardingImg from 'sentry-images/spot/replay-inline-onboarding-v2.svg';
 
 import {Button} from '@sentry/scraps/button';
-import {Container, Flex, Grid} from '@sentry/scraps/layout';
+import {Image} from '@sentry/scraps/image';
+import {Container, Flex, Grid, Stack} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
-import {Heading} from '@sentry/scraps/text';
+import {Separator} from '@sentry/scraps/separator';
+import {Heading, Prose, Text} from '@sentry/scraps/text';
 
 import {GuidedSteps} from 'sentry/components/guidedSteps/guidedSteps';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
@@ -194,9 +196,13 @@ function ConversationOnboardingPanel({
                     </li>
                   </BulletList>
                 </HeaderText>
-                <HeaderImage src={replayOnboardingImg} />
+                <Container display={{xs: 'none', sm: 'block'}}>
+                  <Image src={replayOnboardingImg} alt="" height="120px" width="auto" />
+                </Container>
               </Flex>
-              <Divider />
+              <Container width="95%" margin="0 auto">
+                <Separator orientation="horizontal" />
+              </Container>
               <Grid autoColumns="minmax(0, 1fr)" flow="column" position="relative">
                 <Setup>{children}</Setup>
                 <Container padding="xl" paddingTop="3xl">
@@ -370,43 +376,43 @@ export function ConversationOnboarding({onDismiss}: {onDismiss: () => void}) {
   return (
     <ConversationOnboardingPanel project={project}>
       <SetupTitle project={project} />
-      <Flex gap="md" align="center" wrap="wrap" paddingBottom="md">
+      <Stack gap="md">
         <PlatformOptionDropdown platformOptions={integrationOptions} />
-      </Flex>
-      {introduction && <DescriptionWrapper>{introduction}</DescriptionWrapper>}
-      <GuidedSteps
-        key={selectedIntegration}
-        initialStep={decodeInteger(location.query.guidedStep)}
-        onStepChange={step => {
-          navigate({
-            pathname: location.pathname,
-            query: {
-              ...location.query,
-              guidedStep: step,
-            },
-          });
-        }}
-      >
-        {steps.map((step, index) => (
-          <ConversationStepRenderer
-            key={step.title || step.type}
-            project={project}
-            step={step}
-            stepIndex={index}
-            isLastStep={index === steps.length - 1}
-            onDismiss={onDismiss}
-            trailingItems={
-              index === 0 && copyEnabled ? (
-                <OnboardingCopyMarkdownButton
-                  borderless
-                  steps={steps}
-                  source="conversations_onboarding"
-                />
-              ) : undefined
-            }
-          />
-        ))}
-      </GuidedSteps>
+        {introduction && <Prose>{introduction}</Prose>}
+        <GuidedSteps
+          key={selectedIntegration}
+          initialStep={decodeInteger(location.query.guidedStep)}
+          onStepChange={step => {
+            navigate({
+              pathname: location.pathname,
+              query: {
+                ...location.query,
+                guidedStep: step,
+              },
+            });
+          }}
+        >
+          {steps.map((step, index) => (
+            <ConversationStepRenderer
+              key={step.title || step.type}
+              project={project}
+              step={step}
+              stepIndex={index}
+              isLastStep={index === steps.length - 1}
+              onDismiss={onDismiss}
+              trailingItems={
+                index === 0 && copyEnabled ? (
+                  <OnboardingCopyMarkdownButton
+                    borderless
+                    steps={steps}
+                    source="conversations_onboarding"
+                  />
+                ) : undefined
+              }
+            />
+          ))}
+        </GuidedSteps>
+      </Stack>
     </ConversationOnboardingPanel>
   );
 }
@@ -420,16 +426,16 @@ function UnsupportedPlatformOnboarding({
 }) {
   return (
     <ConversationOnboardingPanel project={project}>
-      <DescriptionWrapper>
-        <p>
+      <Prose>
+        <Text as="p">
           {tct(
             "Auto instrumentation isn't available for [platform] yet, but you can still get conversations working.",
             {
               platform: platformName,
             }
           )}
-        </p>
-        <p>
+        </Text>
+        <Text as="p">
           {tct(
             '[link:Manually instrument] your agents using the Sentry SDK, or let an AI coding agent set it up for you.',
             {
@@ -438,24 +444,24 @@ function UnsupportedPlatformOnboarding({
               ),
             }
           )}
-        </p>
+        </Text>
         <CopyLLMPromptButton />
-      </DescriptionWrapper>
+      </Prose>
     </ConversationOnboardingPanel>
   );
 }
 
 function NoDocsOnboarding({project}: {project: Project}) {
   return (
     <ConversationOnboardingPanel project={project}>
-      <DescriptionWrapper>
-        <p>
+      <Prose>
+        <Text as="p">
           {tct(
             "We don't have a setup checklist for [project] yet, but that won't stop us.",
             {project: project.slug}
           )}
-        </p>
-        <p>
+        </Text>
+        <Text as="p">
           {tct(
             'Follow our [link:documentation] to get started, or let an AI coding agent handle the setup for you.',
             {
@@ -464,9 +470,9 @@ function NoDocsOnboarding({project}: {project: Project}) {
               ),
             }
           )}
-        </p>
+        </Text>
         <CopyLLMPromptButton />
-      </DescriptionWrapper>
+      </Prose>
     </ConversationOnboardingPanel>
   );
 }
@@ -495,17 +501,6 @@ const Title = styled('div')`
   margin-bottom: ${p => p.theme.space.md};
 `;
 
-const HeaderImage = styled('img')`
-  display: block;
-  pointer-events: none;
-  height: 120px;
-  overflow: hidden;
-
-  @media (max-width: ${p => p.theme.breakpoints.sm}) {
-    display: none;
-  }
-`;
-
 const Setup = styled('div')`
   padding: ${p => p.theme.space['3xl']};
 
@@ -525,35 +520,3 @@ const Arcade = styled('iframe')`
   margin-top: ${p => p.theme.space.md};
   border: 0;
 `;
-
-const Divider = styled('hr')`
-  width: 95%;
-  border: none;
-  border-top: 1px solid ${p => p.theme.tokens.border.primary};
-  margin: 0;
-`;
-
-const DescriptionWrapper = styled('div')`
-  code:not([class*='language-']) {
-    color: ${p => p.theme.colors.pink500};
-  }
-
-  :not(:last-child) {
-    margin-bottom: ${p => p.theme.space.md};
-  }
-
-  && > h4,
-  && > h5,
-  && > h6 {
-    font-size: ${p => p.theme.font.size.xl};
-    font-weight: ${p => p.theme.font.weight.sans.medium};
-    line-height: 34px;
-  }
-
-  && > * {
-    margin: 0;
-    &:not(:last-child) {
-      margin-bottom: ${p => p.theme.space.md};
-    }
-  }
-`;
diff --git a/static/app/views/explore/replays/detail/layout/replayLayout.tsx b/static/app/views/explore/replays/detail/layout/replayLayout.tsx
@@ -169,7 +169,6 @@ const BodyGrid = styled('div')`
   display: grid;
   grid-template-rows: 1fr auto;
   gap: ${p => p.theme.space.xl};
-  padding: ${p => p.theme.space.xl};
   flex: 1;
 
   /*

diff --git a/static/app/views/feedback/feedbackEmptyState.tsx b/static/app/views/feedback/feedbackEmptyState.tsx
@@ -96,7 +96,7 @@ export function FeedbackEmptyState({projectIds, issueTab = false}: Props) {
   return (
     <OnboardingPanel
       data-test-id="user-feedback-empty"
-      image={<img src={emptyStateImg} />}
+      image={<img src={emptyStateImg} alt="" />}
     >
       <h3>{t('What do users think?')}</h3>
       <p>