-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ArgsTable: Fix styles to allow long text to wrap #11818
Conversation
…ep short text from wrapping
@@ -30,10 +30,11 @@ const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({ | |||
flexWrap: 'wrap', | |||
alignItems: 'flex-start', | |||
marginBottom: '-4px', | |||
minWidth: 100, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This value is a bit arbitrary. Without it, a short string like default
would wrap the lt
to the next line. 100px min width seemed small enough to me that the column wouldn't be overly big if there were no defaults, but would keep relatively short values from breaking to a new line.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fair
@cfhull thank you I hit the same issue |
@shilman review? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @cfhull !!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Issue: #11362
What I did
This PR, while doing some awesome things, doesn't resolve the word wrapping issue.
Specifically, the new
word-break: break-all
property conflicts with the existingword-wrap: nowrap
property that is inherited fromstyles.span
. I also added a min-width to keep it from breaking on short words.Current behavior:
New behavior:
How to test