Skip to content

Commit 13e81bb

Browse files
Restore basic element styles for modal dialog content (#2021)
## 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: <img src="https://github.com/user-attachments/assets/b3a2c91b-6a30-4385-9a90-190b510bcd44" width="600"> 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: <img src="https://github.com/user-attachments/assets/005b8d9f-3fe2-446b-ab7f-0f9fccb47854" width="600"> ## 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.
1 parent e4ffd2d commit 13e81bb

File tree

1 file changed

+15
-0
lines changed

1 file changed

+15
-0
lines changed

packages/playground/website/src/components/modal/style.module.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
.modal {
22
max-width: 600px;
33

4+
p {
5+
margin-block: 13px;
6+
7+
&:first-child {
8+
margin-block-start: 0;
9+
}
10+
&:last-child {
11+
margin-block-end: 0;
12+
}
13+
}
14+
15+
b {
16+
font-weight: 700;
17+
}
18+
419
textarea {
520
resize: vertical;
621
width: 100% !important;

0 commit comments

Comments
 (0)