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

Remove trailing margin from HTML elements within markdown tables #2365

Conversation

jackbrewer
Copy link
Contributor

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
imageimage

After
imageimage

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 the margin-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?

  • Yes, this PR does not depend on additional changes. 🚢

@jackbrewer jackbrewer requested a review from a team as a code owner January 10, 2023 20:28
@changeset-bot
Copy link

changeset-bot bot commented Jan 10, 2023

🦋 Changeset detected

Latest commit: ed84ede

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/css Patch

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

Copy link
Contributor

@simurai simurai left a 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.

@@ -78,6 +78,12 @@
border: 0;
}

td {
Copy link
Contributor

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.

Copy link
Contributor Author

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.

@jackbrewer jackbrewer requested review from simurai and removed request for jonrohan January 23, 2023 11:40
Copy link
Contributor

@simurai simurai left a 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 🙇

@simurai simurai merged commit 4b94fbb into primer:main Jan 24, 2023
@primer-css primer-css mentioned this pull request Jan 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants