How and where to insert a FluentAppBar in a FluentLayout

[Pascall60]

Hi
I've almost finished my switch to Fluent UI.
I have a little problem with the footer and/or the AppBar.
Without AppBar my footer is in its place, at the bottom of the page.
With AppBar my footer is no longer in its place.
It is shifted down by the height of AppBar which is logical.
Before my switch to Fluent UI I used a GridLayout in css.
Now I'm a little lost with the styles included in Fluent UI?!
I've tried several times with styles but without success.
I added the code that is normally in my components, directly in the MainLayout for the attached example.
I specify that via my components the rendering is the same.

If anyone has already struggled with this type of Layout, I'm interested ;)

Best regards,
Pascal

MainLayout.razor.txt

[vnbaaij]

.main needs to have min-height: calc(100dvh - 138px);
min-height needs to be removed from .body-text

ie. in app.css:

.main {
    min-height: calc(100dvh - 138px);
    color: var(--neutral-foreground-rest);
    align-items: stretch !important;
}

.body-content {
    align-self: stretch;
    display: flex;
}