Inner list action looks inconsistent with card header action

[TrySound]

Inner list action looks inconsistent with card header action

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

More consistent spaces

Current Behavior

Steps to Reproduce

Link: https://codesandbox.io/s/n55mqrjpjj

[TrySound]

It also looks like action button is too close to the edge of paper on small screens

[mbrookes]

@TrySound

404 Not Found
We could not find the sandbox you're looking for

[TrySound]

@mbrookes Fixed the link

[oliviertassinari]

@TrySound Following the specification I think that the list implementation is correct, we can change the card to be more consitent.

https://material.io/design/components/lists.html#specs
What about using marginRight: -12, here?
https://github.com/mui-org/material-ui/blob/9c671898ad6cf01281fd99b5d0d8ee11344b63db/packages/material-ui/src/CardHeader/CardHeader.js#L25

[TrySound]

Yep, that would be good. But the issue is mostly about list item action which should follow the same spec.

[TrySound]

I mean it doesn't have media query.

[mbrookes]

It also looks like action button is too close to the edge of paper on small screens

Looks like the padding on the card-header is reduce at < 600px width, so the negative margin on the icon needs to reduced to compensate which is an easy fix.

What about using marginRight: -12, here?

Just what I had 😄:

    marginRight: -12,
    [theme.breakpoints.up('sm')]: {
      marginRight: -20,
    },

However aligning the icon with the ListItem breaks makes the misalignment with the CardActions more obvious:

(Top and bottom right icons.)

We could add negative margin to the icons in the demo:

  expand: {
    transform: 'rotate(0deg)',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
    marginLeft: 'auto',
    [theme.breakpoints.up('sm')]: {
      marginRight: -8,
    },
  },

[mbrookes]

Yep, that would be good. But the issue is mostly about list item action which should follow the same spec.

That is the spec for ListItem, and the action icon follows it. It's about changing the Card to match it.

[TrySound]

is position: absolute; right: 4px a material spec?