Summary Component - vertical alignment

[SatnamSinghUK]

Hi, I have an issue with the Summary Component.

All text aligns to the top fine.

But adding an image/map forces the Title and Change link to align to the bottom

What

Briefly describe the thing you’re proposing. (It could be a style, component or pattern or something to add to the content style guide.)

Why

Here a repro of the issue
https://jsfiddle.net/qc2tayw6/

I think this is a viable issue, if in a scenario where an image or a map or similar needs to be added, all the elements should align correctly.

Anything else

A proposed fix is adding something like this:

.nhsuk-summary-list__key,
.nhsuk-summary-list__value,
.nhsuk-summary-list__actions {
vertical-align: top;
}

So all elements align vertically to the top

[chrimesdev]

Hey @SatnamSinghUK thanks for opening this issue.

This seems like a viable fix to the issue, do you want to open a pull request on the NHS.UK frontend repository with your proposed changes? The team can then review the changes and take this forward.

If you're not sure where to start we have the NHS.UK frontend contributing guidelines.

Thanks

[chrimesdev]

I have transferred this issue to the NHS.UK frontend repository as it relates to an issue with code in the library.

[SatnamSinghUK]

Hey Adam,

Thanks for the quick response on this.

Fantastic I will push the fix on that repo 👍

[chrimesdev]

Thanks for that @SatnamSinghUK I will take a look tomorrow and get it merged.