Improve display for multiple action buttons in notices #31799
Merged
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.
Description
When adding multiple buttons via actions in the
Notice
component, the buttons are each added on a new line. When there are multiple notices and multiple buttons, this becomes quite intrusive and overtakes a significant portion of the browser window.This PR adds a structural div around the actions in the
Notice
component, and some styling to align buttons on the same line so that the display is less intrusive when there are multiple notices and multiple actions.How has this been tested?
Tested in:
Screenshots
Without wrapping (current):
With wrapping (this PR):
Types of changes
This is a bugfix / styling improvement and does not affect any areas of the code-base outside of the
Notice
component.Note: The
column-gap
property would be perfect for this, but due to partial implementation / conflicting naming with thecolumn-gap
property used for Grid, it is not possible to detect support via@supports
for this property in the Flex context (more info). This is an issue in Safari 14, which is within the two latest versions.Checklist:
*.native.js
files for terms that need renaming or removal).