diff --git a/static/app/views/feedback/feedbackEmptyState.tsx b/static/app/views/feedback/feedbackEmptyState.tsx
index d9301bd3266a8c..feb903deb7b4e8 100644
--- 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 (
}
+ image={
}
>
{t('What do users think?')}
From 5d4ce2416fdffd51efcb25428524a86164493466 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira
Date: Tue, 26 May 2026 08:13:16 +0200
Subject: [PATCH 3/4] fix(autofix): Prevent loading spinner clip in artifact
loading card (#115988)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## Summary
The loading row of the autofix Root Cause / Solution / Code Changes
cards rendered the spinner partially cut off at the bottom while
streaming was in progress.
**Root cause:** the inner scroll container is constrained vertically by
a parent flex ancestor to the spinner's intrinsic height (16px), and
`overflow-y: auto` removes the flex `min-height: auto` protection that
would normally keep the container at content height. The adjacent
`` defaults to `line-height: 19.6px`, so the row's content was 3px
taller than the container — `useAutoScroll` then scrolled by exactly
that 3px and clipped the top of the spinner.
**Fix:** set `density="compressed"` on the `` (line-height: 1), so
the text's content box matches its font-size and the row fits within the
container — no overflow scroll triggered.
**Before**
https://github.com/user-attachments/assets/798eb24c-75bd-4401-9548-84aebeb52cf1
**After**
https://github.com/user-attachments/assets/82466e77-d299-45b5-96da-52b50467f570
---
.../components/events/autofix/v3/artifactLoadingDetails.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/static/app/components/events/autofix/v3/artifactLoadingDetails.tsx b/static/app/components/events/autofix/v3/artifactLoadingDetails.tsx
index 50c8ab7b86f8f3..872c44595e30cb 100644
--- 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({
})}
- {loadingMessage}
+
+ {loadingMessage}
+
From 3c400f8bc4b9954762ecaa100d0a6b53af037e87 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira
Date: Tue, 26 May 2026 09:45:16 +0200
Subject: [PATCH 4/4] ref(conversations): Adopt scraps primitives for 4
wrappers (#116082)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
| # | Replace | With | File |
| --- | --- | --- | --- |
| 1 | `HeaderImage` (styled img) | `` (wrapped in `` to preserve the small-screen hide)
| `onboarding.tsx` |
| 2 | `Divider` (styled hr, 95% width) | ``
(wrapper preserves 95% width and centers it — also fixes a pre-existing
off-center bug) | `onboarding.tsx` |
| 3 | `DescriptionWrapper` (h4/h5/h6 typography resets) | `` (and
raw `` inside swapped for ``) | `onboarding.tsx` |
| 4 | `CellExpander` (styled div, `width: 100vw`) | `` | `conversationsTable.tsx` |
---
.../components/conversationsTable.tsx | 14 +-
.../conversations/conversationDetail.tsx | 1 +
.../explore/conversations/onboarding.tsx | 153 +++++++-----------
3 files changed, 64 insertions(+), 104 deletions(-)
diff --git a/static/app/views/explore/conversations/components/conversationsTable.tsx b/static/app/views/explore/conversations/components/conversationsTable.tsx
index 38665c437c5ed7..0467f60f471ee5 100644
--- 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' && }
- {column.key === 'inputOutput' && }
+ {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.
+
+ )}
);
}, []);
@@ -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
index c17c9cc28004fb..a248897e6112ba 100644
--- 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
index b0a733b5df6a55..48e0c902ed1902 100644
--- 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({
-
+
+
+
-
+
+
+
{children}
@@ -370,43 +376,43 @@ export function ConversationOnboarding({onDismiss}: {onDismiss: () => void}) {
return (
-
+
-
- {introduction && {introduction}}
- {
- navigate({
- pathname: location.pathname,
- query: {
- ...location.query,
- guidedStep: step,
- },
- });
- }}
- >
- {steps.map((step, index) => (
-
- ) : undefined
- }
- />
- ))}
-
+ {introduction && {introduction}}
+ {
+ navigate({
+ pathname: location.pathname,
+ query: {
+ ...location.query,
+ guidedStep: step,
+ },
+ });
+ }}
+ >
+ {steps.map((step, index) => (
+
+ ) : undefined
+ }
+ />
+ ))}
+
+
);
}
@@ -420,16 +426,16 @@ function UnsupportedPlatformOnboarding({
}) {
return (
-
-
+
+
{tct(
"Auto instrumentation isn't available for [platform] yet, but you can still get conversations working.",
{
platform: platformName,
}
)}
-
-
+
+
{tct(
'[link:Manually instrument] your agents using the Sentry SDK, or let an AI coding agent set it up for you.',
{
@@ -438,9 +444,9 @@ function UnsupportedPlatformOnboarding({
),
}
)}
-
+
-
+
);
}
@@ -448,14 +454,14 @@ function UnsupportedPlatformOnboarding({
function NoDocsOnboarding({project}: {project: Project}) {
return (
-
-
+
+
{tct(
"We don't have a setup checklist for [project] yet, but that won't stop us.",
{project: project.slug}
)}
-
-
+
+
{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}) {
),
}
)}
-
+
-
+
);
}
@@ -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};
- }
- }
-`;