Align accordion's icon with heading

[andesol]

Done

- Add a media query to change the alignment of the icon when next to a heading, so we use a different line-height to calculate the icon's position depending on the screen size.

Update the styling of the accordion.

Fixes #4418

QA

• Open demo
• Go to the example with headings (https://vanilla-framework-4424.demos.haus/docs/examples/patterns/accordion/headings) and check that the icon looks aligned no matter the screen size. (The problem we had was that the icon was misaligned in small screens).

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo starting at https://vanilla-framework-4424.demos.haus

[andesol]

I updated the styling trying to follow what @lyubomir-popov shared yesterday. Now the icon's alignment is done from the baseline and we don't need media-queries.

Side effect 1: since the icon is part of the "flow" now (previously it was position: absolute), the text in a h2 is slightly missaligned (due to the icon being a bit bigger and pushing to the right). I don't know if having different headings in the same accordion is a real use-case.

Side effect 2: since icon size scales with font-size, the icon next to an h2 is slightly bigger on large screen but slightly smaller than the rest in small screens. I don't know if that's to be expected, but it happens here as well: https://vanillaframework.io/docs/examples/utilities/font-metrics

[lyubomir-popov]

Suggested change

	vertical-align: 0;

Why is this here? It undoes the font metrics calculations.

[andesol]

I assumed it was an exception to align the icon to the heading. It is used in the font metrics example and defined here: https://github.com/canonical-web-and-design/vanilla-framework/blob/main/scss/_patterns_icons.scss#L62

[bartaz]

@lyubomir-popov

current (with vertical-align: 0):

without vertical-align 0:

[lyubomir-popov]

@bartaz it tries to align with the top of lowercase letters - known as x-height. It might need a bit of finessing, but it shouldn't just be reset to 0 IMO.

[bartaz]

Created #4437 for further adjustments. We can merge this as it is.