fix(feedback): Stop long error messages from resizing the feedback dialog - #23376
Draft
msonnb wants to merge 1 commit into
Draft
fix(feedback): Stop long error messages from resizing the feedback dialog#23376msonnb wants to merge 1 commit into
msonnb wants to merge 1 commit into
Conversation
…alog The error message container could both overflow the dialog and, above the 600px breakpoint, widen it past the viewport. Two things caused it. `.form__right` is a `<fieldset>`, and the UA stylesheet gives fieldsets `min-inline-size: min-content`, which stretches them to the longest unbreakable word they contain. Separately, `.dialog__position` is fixed with `inset: auto 0 0 auto`, so only its bottom and right edges are anchored and its width is shrink-to-fit — meaning any descendant's intrinsic width propagates up into the dialog's own width. `min-width: 0` on the fieldset removes the UA floor. On the error container, `width: 0` combined with `min-width: 100%` removes it from intrinsic sizing altogether: percentages are ignored while intrinsic sizes are computed, so it contributes 0 to that pass, then fills its container once the container's width is known. `overflow-wrap: break-word` then breaks words too long for the resulting box. `overflow-wrap: anywhere` would replace both declarations on the error container, but it needs Safari 15.4 and the SDK supports 15.0. Verified in Chromium, WebKit and Firefox at 320/420/768/1024/1440px against the default message, a long URL and a 200-character unbreakable token: the dialog now matches its no-error width in every combination. Previously the default `errorGenericText` alone widened it by ~135px at 768px and above. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
size-limit report 📦
|
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
1 participant
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.
Fixes a bug where long error messages (including the default one) in the feedback dialog would not wrap, but instead extend the dialog's width, potentially overflowing the page.
Before (left) vs. after (right):
Closes #14930