-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
Remove trailing margin from HTML elements within markdown tables #2365
Remove trailing margin from HTML elements within markdown tables #2365
Conversation
🦋 Changeset detectedLatest commit: ed84ede The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
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.
I can reproduce this with:
Name | Link |
---|---|
📱 Preview on mobile | Toggle QR Code...QR Code |
I agree <details>
looks weird with the extra bottom margin.
src/markdown/markdown-body.scss
Outdated
@@ -78,6 +78,12 @@ | |||
border: 0; | |||
} | |||
|
|||
td { |
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.
Should we move this into markdown/tables.scss? Since it's a specific override for tables.
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.
Ah, I missed that file! Yep, that makes sense – styles have been moved.
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.
Ok, I think this looks good.
Thanks 🙇
What are you trying to accomplish?
Hi 👋 , I have a pretty niche styling problem which happens when using an HTML element within a table cell within a
.markdown-body
class. The existing.markdown-body
styles add a trailing margin to various elements. When inside a table cell, this margin causes misalignment and makes the cell stand out from other text-only cells.For my specific use-case, I'm using a
<details>
element within a table when adding comments to GitHub pull requests.Before
After
What approach did you choose and why?
I followed the example set by the existing
.markdown-body blockquote > :last-child
selector, adding a child combinator to remove themargin-bottom
. This means it will apply to any direct child element for consistency.What should reviewers focus on?
I'm new here so have no concept of the scope of this change! I'm not using Primer directly, just as part of the GitHub UI.
Can these changes ship as is?