style: Apply a large right-padding to ModalHeader to match left side

[nats12]

Short description

Recently after working on the edit filter modal, it became obvious that the right hand side padding of the modal's header was much smaller, especially when our modal body's padding is set to large.

I see we've done it to account for button padding, but have also witnessed this style being overriden in some cases in todoist to align it with the left i.e. task detail header.

I feel it would look better if we align these at the root component, and also that it's not necessarily this component's job to account for potentially large buttons within it. Instead, it should be handled by consumers if need be. Happy to discuss this further if there are any strong opinions on this change though.

PR Checklist

• [ ] The ModalHeader has a large padding on both right and left sides.

• [ ] Added tests for bugs / new features

• [x] Updated docs (storybooks, readme)

• [x] Executed npm run validate and made sure no errors / warnings were shown

• [x] Described changes in CHANGELOG.md

• [x] Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref

• [ ] Reviewed and approved Chromatic visual regression tests in CI

Versioning

Small fix, bumped tov21.1.1

[nats12]

Looping in @gnapse too as design system DRD.

[scottlovegrove]

Unless this is needed urgently, I would recommend waiting for @pawelgrimm as he is working on something in the same area that could fix this as part of the overall changes he's making.

• https://github.com/Doist/reactist/pull/784

[gnapse]

The reason I recall for the right-side padding to be smaller is to give the impression that the close button icon's is right-aligned. It is better explained with a couple of screenshots:

See how we want the icon inside the button to be the thing that is right-aligned with the modal's content. However, the button element is bigger than the button icon, as can be seen in the following screenshot:

However, that being said, I agree that hard-coding a smaller spacing to the right of the header might not be the best solution. But whatever other solution we find, it should keep in mind this need for alignment with the modal's close button icon.

cc @pawelgrimm to keep it in mind on that pull request that you're working on in Reactist.

[nats12]

Unless this is needed urgently

It is not, so I will close this PR as it would be superseded by the changes @pawelgrimm is working on.

Thank you both for the context @scottlovegrove, @gnapse 👍🏼

[pawelgrimm]

@nats12 Feel free to commandeer my PR: https://github.com/Doist/reactist/pull/784 I'd like to finish it, but it might be a low priority for me for a while.