Restore basic element styles for modal dialog content #2021
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.
Motivation for the change, related issues
We added a general CSS reset to the web app styles in #1759, and some modal dialog content depended on user agent styles for rendering properly.
For example, before the CSS reset, the GitHub auth dialog used to be styled like this:
After the reset, its paragraphs lost default vertical margins, and content in a
<b>
element lost its bold look. After the reset, the dialog looked like this:Implementation details
The PR attempts to restore the styles assumed by modals before this change.
This PR adds some style rules for modals to restore vertical margins to paragraph elements and boldness to
<b>
tags. A downside to this approach is that we'll have to manually add CSS rules every time we miss a user agent style that was reset, but an upside to the approach is that we can have consistent, explicit rules for the styles we require.Testing Instructions (or ideally a Blueprint)
Run
npm run dev
, open all the different dialogs, and confirm they are styled as expected.