🐛 [BUG] - Pillar Image added whitespace when `as="picture"` attribute is used.

[joshvogel17]

Describe the bug

Found while working on: https://github.com/github/marketing-platform-services/issues/3793 Relevant PR: https://github.com/github/github/pull/359729

When adding a Pillar.Image and using the as="picture" the border on the bottom of the image was not rounded. Inspecting the page in the developers tools showed there to be some additional whitespace at the bottom of the image causing the issue. As a workaround, adding the style vertical-align: bottom to Pillar.Image seemed to resolve the issue.

Image where as="picture" property is set

Image where default as property is set

Reproduction steps

1. Create Pillar with Pillar.Image
2. Set `as="picture"` property to `Pillar.Image`
3. View Pillar. Notice that the border is not rounded on the bottom.

Expected behavior

Pillar.Image with as="picture" property set will still have a rounded border on the bottom.

Screenshots

Browsers

Chrome

OS

Mac

[seangolob]

Hi PB team!

I think I have a similar issue except with the card component. When I try to leverage as="picture" on the Card.Image, I am seeing a missing rounded border at the bottom.

Before (no picture tag):

After (with picture tag):

I believe the issue is the picture tag in this case has display: inline-block style on it which is causing 4px of whitespace under the image. I have a workaround in place to avoid this issue so I am by no means blocked.

Inspect view (with picture tag):

[seangolob]

Hi there! I am experiencing a similar issue to these with the "River" element when I try to leverage the picture tag. The picture element is missing a height: 100% style so it doesn't consistently fill the height of its container. I believe we will need to adjust https://github.com/primer/brand/blob/main/packages/react/src/river/river-shared.module.css#L17 to add support for making the picture tag height: 100%.

I have a workaround in place so this doesn't block me at all.

[seangolob]

@rezrah I've been piling into this issue a bit recently. I can easily split out the 3 separate comments into separate issues if that makes things easier for you or whomever works on this. My thought process is that these changes are all related to the picture tag so it easier to have it one spot. :bow:

[joshfarrant]

If you don't mind, separate issues would be helpful please @seangolob 🙏

[seangolob]

https://github.com/primer/brand/issues/929 https://github.com/primer/brand/issues/930

Issues filed! We can consider all of my comments on this PR out of scope. Thanks @joshfarrant !