Truncates modal to fit content and centers

[petesfrench]

Done

• Truncates modal to fit where the content ends and centers the modal when viewing on mobile.

Fixes #3906

QA

• Open demo
• Check the modal works as expected and that it limits the size to fit that of the content.

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

[webteam-app]

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

[lyubomir-popov]

@bartaz one concern with the centering - what happens when, as a result of interaction, the height changes? this would jump to a different position.Should we have a version of this that is positionable in a fixed way, so that it doesn't move if you tick a checkbox and it reveals a couple more fields.

[bartaz]

@bartaz one concern with the centering - what happens when, as a result of interaction, the height changes? this would jump to a different position.Should we have a version of this that is positionable in a fixed way, so that it doesn't move if you tick a checkbox and it reveals a couple more fields.

@lyubomir-popov We can fix it ourselves to the top (as it was before) without making it full screen. But it's also as easy as setting top in CSS or JS. So we can describe it in the docs.
But in such case we should have a recommendation - when dialogs should be aligned to the top and when not? Maybe for simplicity always align them from top?

[lyubomir-popov]

I'd say pick an optimum max height for the panel, and center that - then expand until you reach it, as needed.

So if your panel will expand from 300px to say 600px, and you're doing the positioning via js - calculate your top offset so that the final 600px height would appear centered. This means initially the 300px panel will be 300px above the vertically centered position, which is fine.

[bartaz]

Looks good! Thanks