How do I prevent my site from sliding under the fixed header on mobile (react/mui/tailwind)

I have the following

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

But when I try to visit my site on an android via AVD or regular device I see the main area slide under the fixed header. Here is a video that shows it

https://youtube.com/shorts/ZYd3MEoatto?feature=share

It happens super quick so make sure to go all the way back to the beginning to see it. The code is available here

https://github.com/jrgleason/doo-dah-aui/tree/UPDATING_THE_APP

How do I get the tabs to not slide under the fixed header?

I don't see anything more in the docs

I also tried the solutions here without success

I finally got it working after a massive simplification of the styling and what I got to work was something like this...

import React from "react";
import TabNavigation from "../../components/Chat/TabNavigation.jsx";
import ChatComponent from "../../components/Chat/ChatComponent.jsx";
import ContentSubmission from "../../components/Content/ContentSubmission.jsx";
import {styled} from "@mui/material/styles";

function MainPage() {
    const Offset = styled('div')(({theme}) => ({
        ...theme.mixins.toolbar,
        position: 'static'
    }));
    return (
        <div className={"size-full flex flex-col"}>
            <Offset />
            <TabNavigation>
                <ChatComponent/>
                <ContentSubmission/>
            </TabNavigation>
        </div>
    );
}

export default MainPage;

This then did work in both the Mobile as well as Desktop browser.