fix(grid): include padding in max-width and align with nav bar

[larsrickert]

Relates to #867, #867 (comment)

After a talk with @jannick-ux we came to the conclusion that:

• width in Figma are meant to include the padding so if grid max width is 1440px, the actual component width is 1312px so in total: 1312px width + 2 * 64px padding = 1440px.

What I did:

• fix grid to use box-sizing: border-box; instead of content-box
• add screenshot tests which shows a full app layout with nav bar and page content to test that both are aligned with each other
• add grid demo page to the alpha demo app so we can play around with it and see it in action

Checklist

• The added / edited code has been documented with JSDoc
• If a new component is added, at least one Playwright screenshot test is added
• A changeset is added with npx changeset add if your changes should be released as npm package (because they affect the library usage)

[changeset-bot]

🦋 Changeset detected

Latest commit: 4993d72

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
sit-onyx	Patch
alpha-test-app	Patch
playground	Patch
@sit-onyx/chartjs-plugin	Patch
@sit-onyx/storybook-utils	Patch
@sit-onyx/vitepress-theme	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR