[MainLayout] Remove double header reduction

[Tyme-Bleyaert]

Fix #3836

Pull Request

📖 Description

Removed header height reductions from Mainlayout, added a vertical stack.
Stacks now always have 100% height.
I've kept the --header-height variable as it might be used by some users already.

🎫 Issues

#3836

👩‍💻 Reviewer Notes

I think we should take cases in consideration when the navigation or main content exceeds the 100%.
We can either re-add the subtraction to the vertical stack and add a parameter to the component SubHeaderHeight and subtract this from the horizontal stack.
Or we can let the user define the styles for these stacks themselves.

📑 Test Plan

Added test to check default styles of mainlayout stacks

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

[vnbaaij]

@Tyme-Bleyaert for PR naming, please use the syntax
[component name] Description

For the component name, leave out the Fluent part. For the description, do not use the issue number in there. Just a clear, short summary.

In the PR description, use the 'fix #issuenumber' syntax to automatically link the issue to the PR. That way the issue gets closed when the pr is merged.
For PR description try to use before and after images /screenshot to make more clear what has changed. We link to the PRs from the what's new page so it helps to provide context. Thanks!

[MarvinKlein1508]

@vnbaaij perhaps it's a good idea to add these details to the contributing.md

[vnbaaij]

Yeah, was thinking that too. Will do that next week.