content height dynamically calculated using app bar height

compliance-web/src/components/Shared/EAOAppBar.tsx

@@ -14,7 +14,10 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import { AppConfig } from "@/utils/config";
 import { useAuth } from "react-oidc-context";
 import EnvironmentBanner from "./EnvironmentBanner";
+import { forwardRef, HTMLProps } from "react";
 
+
+type EAOAppBarProps = HTMLProps<HTMLDivElement>;
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
 }
@@ -28,12 +31,12 @@ const AppBar = styled(MuiAppBar, {
   }),
 }));
 
-export default function EAOAppBar() {
+const EAOAppBar = forwardRef<HTMLDivElement, EAOAppBarProps>((_props, ref) => {
   const theme = useTheme();
   const auth = useAuth();
   return (
     <>
-      <AppBar position="static" color="primary" open={true}>
+      <AppBar ref={ref} position="static" color="primary" open={true}>
         <Grid
           container
           padding={"0.938rem 1.5rem"}
@@ -111,4 +114,6 @@ export default function EAOAppBar() {
       </AppBar>
     </>
   );
-}
+});
+
+export default EAOAppBar;

compliance-web/src/routes/__root.tsx

@@ -4,6 +4,7 @@ import SideNavBar from "@/components/Shared/SideNav/SideNavBar";
 import { Box } from "@mui/system";
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import { useState, useRef, useEffect } from "react";
 import { AuthContextProps } from "react-oidc-context";
 
 type RouterContext = {
@@ -16,10 +17,25 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 });
 
 function Layout() {
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const appBarRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (appBarRef.current) {
+      setHeaderHeight(appBarRef.current.offsetHeight);
+    }
+  }, []);
+
   return (
     <>
-      <EAOAppBar />
-      <Box display={"flex"} height={"calc(100vh - 112px)"} overflow={"hidden"}>
+      <EAOAppBar ref={appBarRef} />
+      <Box
+        sx={{
+          display: "flex",
+          overflow: "hidden",
+          height: `calc(100vh - ${headerHeight}px)`,
+        }}
+      >
         <SideNavBar />
         <Box
           display={"flex"}