Skip to content
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

Restore basic element styles for modal dialog content #2021

Merged
merged 1 commit into from
Nov 23, 2024

Conversation

brandonpayton
Copy link
Member

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.

@brandonpayton brandonpayton added [Type] Bug An existing feature does not function as intended [Package][@wp-playground] Website labels Nov 22, 2024
@brandonpayton brandonpayton requested a review from a team November 22, 2024 23:22
@brandonpayton brandonpayton self-assigned this Nov 22, 2024
Copy link
Collaborator

@zaerl zaerl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working as expected. Good job! :shipit:

@brandonpayton
Copy link
Member Author

@zaerl Thanks for the quick review!

@brandonpayton brandonpayton merged commit 13e81bb into trunk Nov 23, 2024
10 checks passed
@brandonpayton brandonpayton deleted the fix-modal-styles branch November 23, 2024 00:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package][@wp-playground] Website [Type] Bug An existing feature does not function as intended
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

2 participants