[CardHeader] Action is not vertically centered in Card Header

[kgregory]

This codesandbox illustrates this issue.

The action is positioned with a negative margin, but it appears to be too close top the top edge by 4px:

  /* Styles applied to the action element. */
  action: {
    flex: '0 0 auto',
    alignSelf: 'flex-start',
    marginTop: -8,
    marginRight: -8,
  },

In my repro, I've augmented the action class via override:

  adjustedCardHeaderAction: {
    position: "relative",
    top: 4
  },

I realize this isn't exactly highlighted in the MD spec any longer, but it is a nice example in our docs.

Is this worthy of a PR and if so, are there any concerns with my approach?

If this is worth addressing, I'd be happy to take care of it.

[mbrookes]

It's documented under "overflow menu", and does appear to be vertically centered (which I agree looks better), although in this example the designer hasn't allowed sufficient space to the right for the ripple:

https://material.io/components/cards#actions

[kgregory]

@mbrookes thank you, I missed that. I can submit a PR.

May be as simple as:

  /* Styles applied to the action element. */
  action: {
    flex: '0 0 auto',
    alignSelf: 'flex-start',
    marginTop: -4,
    marginRight: -8,
    marginBottom: -4,
  },