design: Simple InfoCard content not fully aligned

adamdmharvey commented 3 years ago

Expected Behavior

When using an <InfoCard> which has no title, subtitle or links - essentially just content - the content inside of the card should be aligned/balanced within the card outline.

Current Behavior

This is super nitpicky, but with the simple info card and only a single line of text, it's barely noticeable that there is more padding on the bottom than on the top of the text.

Possible Solution

Slight tweaks to the defaults when there is no title nor link at bottom. I did some super quick playing around with the useStyles variants in @backstage/core but wasn't able to align it well. Others may be more familiar with it than I!

Steps to Reproduce

Use of this sample code:

<Grid item sm={12}>
  <InfoCard>
    <Typography variant="body1">
      This portal is designed to improve the Developer Experience in our organization.
    </Typography>
  </InfoCard>
</Grid>

Context

Your Environment

NodeJS Version (v12): v14
Operating System and Version (e.g. Ubuntu 14.04): Mac OS Catalina
Browser Information: Safari

freben commented 3 years ago

Yep.

The base padding is 16px all around, but not on the very last child. Seems intentional on MUI's part - I wonder how this plays together with other parts of the card. I don't see a corresponding padding on the top or elsewhere. It's almost like they wanted the cards to be bottom heavy...

This is where the fix can be placed anyway.

adamdmharvey commented 3 years ago

Yep, I'm not the only one who noticed; should have done a bit better searching Stackoverflow and Google! No good answers I've found yet tho.

https://github.com/mui-org/material-ui/issues/9871

freben commented 3 years ago

Thanks for the link I'd be fully OK with removing the extra padding, personally (making it the same all around). They talk about ascenders / descenders etc but a full 1 stop extra space is MASSIVE compared to the typography steps, so ... Will probably look a lot better with just fixed 2 stops all around the box :)

backstage / backstage