fix(ui): Remove overflow hidden from GuidedSteps StepDetails#112336
Merged
priscilawebdev merged 1 commit intomasterfrom Apr 7, 2026
Merged
fix(ui): Remove overflow hidden from GuidedSteps StepDetails#112336priscilawebdev merged 1 commit intomasterfrom
priscilawebdev merged 1 commit intomasterfrom
Conversation
The overflow: hidden on StepDetails was clipping focus rings (box-shadow based) on form elements inside guided steps. Since min-width: 0 already prevents grid blowout and child components handle their own horizontal overflow via overflow-x: auto, this property is no longer needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
bot
added
the
Scope: Frontend
nikolovlazar
approved these changes
Apr 7, 2026
george-sentry
pushed a commit
that referenced
this pull request
Apr 9, 2026
Remove `overflow: hidden` from `StepDetails` in the `GuidedSteps` component. ### Background `StepDetails` is a grid item in a `34px 1fr` layout. When content inside it (like a code block with long lines) had a large intrinsic width, it would push past its `1fr` column and break the layout on small viewports. To prevent this, `overflow: hidden` was added — it worked, but it also clipped everything that extended beyond the container bounds, including focus rings on form elements (which use `box-shadow` in Sentry's design system): <img width="427" height="241" alt="image" src="https://github.com/user-attachments/assets/f693c434-1027-4237-b643-52d974f94897" /> ### What happened On **Mar 25**, Evans noticed the clipping issue and removed `overflow: hidden` in #111462. But without it, content started overflowing on small screens again, so on **Mar 27** it was reverted in 939e726. Then on **Mar 31**, Lazar landed #111657 which added `min-width: 0` to `StepDetails` to fix a code block overflow issue in the Metrics onboarding. Since the revert had already restored `overflow: hidden`, the overflow was no longer visible — but `min-width: 0` was still the right addition, and it also happens to solve the clipping issue, since it lets the grid item respect its track width without needing to clip its contents. ### This PR Now that `min-width: 0` handles the overflow problem, `overflow: hidden` is redundant and can be safely removed — finishing what Evans started in #111462. closes https://linear.app/getsentry/issue/DE-1048/stepper-overflow-hidden-clips-focus-rings Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Remove
overflow: hiddenfromStepDetailsin theGuidedStepscomponent.Background
StepDetailsis a grid item in a34px 1frlayout. When content inside it (like a code block with long lines) had a large intrinsic width, it would push past its1frcolumn and break the layout on small viewports. To prevent this,overflow: hiddenwas added — it worked, but it also clipped everything that extended beyond the container bounds, including focus rings on form elements (which usebox-shadowin Sentry's design system):What happened
On Mar 25, Evans noticed the clipping issue and removed
overflow: hiddenin #111462. But without it, content started overflowing on small screens again, so on Mar 27 it was reverted in 939e726.Then on Mar 31, Lazar landed #111657 which added
min-width: 0toStepDetailsto fix a code block overflow issue in the Metrics onboarding. Since the revert had already restoredoverflow: hidden, the overflow was no longer visible — butmin-width: 0was still the right addition, and it also happens to solve the clipping issue, since it lets the grid item respect its track width without needing to clip its contents.This PR
Now that
min-width: 0handles the overflow problem,overflow: hiddenis redundant and can be safely removed — finishing what Evans started in #111462.closes https://linear.app/getsentry/issue/DE-1048/stepper-overflow-hidden-clips-focus-rings