fix(components): Keep dismiss on drawers aligned to top when titles wrap

[fagnanm]

Motivations

When there are longer titles on drawers (like in Automations where the title is user-generated) the dismiss button tries to align center with the height of the title making things look real weird.

Changes

Adjusted the structure of the headers on drawer and sideDrawer slightly so that the titles appear center aligned but are actually aligned to the start of the container. This keeps the dismiss button and subsequent actions in the right place even if the title wraps onto more than one line.

Changed

Before

Side Drawer

Drawer

After

Side Drawer

Drawer

Testing

Try adding titles that wrap onto more than one line and ones that do not. Actions in the headers should still align center with the heading.

Changes can be tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages[bot]]

Deploying atlantis with    Cloudflare Pages

Latest commit:	f877b2f
Status:	✅  Deploy successful!
Preview URL:	https://5b733494.atlantis.pages.dev
Branch Preview URL:	https://align-sidedrawer-header-top.atlantis.pages.dev

View logs

[github-actions[bot]]

Published Pre-release for f877b2ff69f30bf2a926abad7e1b4f5d20035975 with versions:

  - @jobber/components@5.29.1-align-side-f877b2f.8+f877b2ff

To install the new version(s) for Web run:

npm install @jobber/components@5.29.1-align-side-f877b2f.8+f877b2ff