@xyo-network/react-webapp 2.25.66 → 2.25.69

package/dist/cjs/components/Chrome.js

@@ -11,8 +11,8 @@ const react_shared_1 = require("@xyo-network/react-shared");
 const react_helmet_1 = require("react-helmet");
 const ErrorPage_1 = require("./ErrorPage");
 const WebAppChrome = (_a) => {
-    var { menuItems, navigationType, footerElevation = 4, errorPage, appbar, footer, children, appName } = _a, props = tslib_1.__rest(_a, ["menuItems", "navigationType", "footerElevation", "errorPage", "appbar", "footer", "children", "appName"]);
-    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch", height: "100vh" }, props, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, Object.assign({ defaultTitle: appName, titleTemplate: `%s | ${appName}` }, { children: (0, jsx_runtime_1.jsx)("meta", { content: "website", property: "og:type" }) })), appbar !== null && appbar !== void 0 ? appbar : (0, jsx_runtime_1.jsx)(react_appbar_1.ApplicationAppBar, { menuItems: navigationType === 'menu' ? menuItems : undefined }), (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexGrowRow, Object.assign({ alignItems: "stretch" }, { children: [navigationType !== 'menu' ? menuItems : null, (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowCol, Object.assign({ overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch" }, { children: (0, jsx_runtime_1.jsx)(react_shared_1.ErrorBoundary, Object.assign({ fallback: errorPage !== null && errorPage !== void 0 ? errorPage : (0, jsx_runtime_1.jsx)(ErrorPage_1.WebAppErrorPage, {}) }, { children: children })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ elevation: footerElevation, square: true }, { children: footer !== null && footer !== void 0 ? footer : (0, jsx_runtime_1.jsx)(react_footer_1.Footer, { dynamicHeight: true }) }))] })));
+    var { menuItems, navigationType = 'menu', footerElevation = 4, errorPage, appbar, footer, children, appName } = _a, props = tslib_1.__rest(_a, ["menuItems", "navigationType", "footerElevation", "errorPage", "appbar", "footer", "children", "appName"]);
+    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch", overflow: "hidden", height: "100vh" }, props, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, Object.assign({ defaultTitle: appName, titleTemplate: `%s | ${appName}` }, { children: (0, jsx_runtime_1.jsx)("meta", { content: "website", property: "og:type" }) })), appbar !== null && appbar !== void 0 ? appbar : (0, jsx_runtime_1.jsx)(react_appbar_1.ApplicationAppBar, { menuItems: navigationType === 'menu' ? menuItems : undefined }), (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexGrowRow, Object.assign({ overflow: "hidden", alignItems: "stretch" }, { children: [navigationType !== 'menu' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [menuItems, (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical" })] })) : null, (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowCol, Object.assign({ justifyContent: "flex-start", alignItems: "stretch" }, { children: (0, jsx_runtime_1.jsx)(react_shared_1.ErrorBoundary, Object.assign({ fallback: errorPage !== null && errorPage !== void 0 ? errorPage : (0, jsx_runtime_1.jsx)(ErrorPage_1.WebAppErrorPage, {}) }, { children: children })) }))] })), (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch" }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ elevation: footerElevation, square: true }, { children: footer !== null && footer !== void 0 ? footer : (0, jsx_runtime_1.jsx)(react_footer_1.Footer, { dynamicHeight: true }) })) }))] })));
 };
 exports.WebAppChrome = WebAppChrome;
 //# sourceMappingURL=Chrome.js.map

package/dist/cjs/components/Chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAqC;AACrC,yDAAuF;AAEvF,4DAA6D;AAC7D,4DAAkD;AAClD,4DAAyD;AAEzD,+CAAqC;AAErC,2CAA6C;AAYtC,MAAM,YAAY,GAAgC,CAAC,EAA0G,EAAE,EAAE;QAA9G,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,OAAY,EAAP,KAAK,sBAAxG,0GAA0G,CAAF;IAChK,OAAO,CACL,wBAAC,uBAAO,kBAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,IAAK,KAAK,eACpD,uBAAC,qBAAM,kBAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,gBAC7D,iCAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,IACtC,EACR,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,gCAAiB,IAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,EAC9F,wBAAC,2BAAW,kBAAC,UAAU,EAAC,SAAS,iBAC9B,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7C,uBAAC,2BAAW,kBAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,gBAC7E,uBAAC,4BAAa,kBAAC,QAAQ,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,uBAAC,2BAAe,KAAG,gBAAG,QAAQ,IAAiB,IACzE,KACF,EACd,uBAAC,gBAAK,kBAAC,SAAS,EAAE,eAAe,EAAE,MAAM,sBACtC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,qBAAM,IAAC,aAAa,SAAG,IAC7B,KACA,CACX,CAAA;AACH,CAAC,CAAA;AAlBY,QAAA,YAAY,gBAkBxB"}
+{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA8C;AAC9C,yDAAuF;AAEvF,4DAA6D;AAC7D,4DAAkD;AAClD,4DAAyD;AAEzD,+CAAqC;AAErC,2CAA6C;AAYtC,MAAM,YAAY,GAAgC,CAAC,EAAmH,EAAE,EAAE;QAAvH,EAAE,SAAS,EAAE,cAAc,GAAG,MAAM,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,OAAY,EAAP,KAAK,sBAAjH,0GAAmH,CAAF;IACzK,OAAO,CACL,wBAAC,uBAAO,kBAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAC,OAAO,IAAK,KAAK,eACtE,uBAAC,qBAAM,kBAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,gBAC7D,iCAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,IACtC,EACR,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,gCAAiB,IAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,EAC9F,wBAAC,2BAAW,kBAAC,QAAQ,EAAC,QAAQ,EAAC,UAAU,EAAC,SAAS,iBAChD,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3B,6DACG,SAAS,EACV,uBAAC,kBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,IACjC,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,uBAAC,2BAAW,kBAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,gBAC3D,uBAAC,4BAAa,kBAAC,QAAQ,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,uBAAC,2BAAe,KAAG,gBAAG,QAAQ,IAAiB,IACzE,KACF,EACd,uBAAC,uBAAO,kBAAC,UAAU,EAAC,SAAS,gBAC3B,uBAAC,gBAAK,kBAAC,SAAS,EAAE,eAAe,EAAE,MAAM,sBACtC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,qBAAM,IAAC,aAAa,SAAG,IAC7B,IACA,KACF,CACX,CAAA;AACH,CAAC,CAAA;AAzBY,QAAA,YAAY,gBAyBxB"}

package/dist/cjs/index.d.ts

@@ -1,2 +1 @@
 export * from './components';
-export * from './contexts';

package/dist/cjs/index.js

@@ -2,5 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./components"), exports);
-tslib_1.__exportStar(require("./contexts"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B;AAC5B,qDAA0B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B"}

package/dist/esm/components/Chrome.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider, Paper } from '@mui/material';
 import { FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox';
-import { ApplicationAppBar } from '@xyo-network/react-appbar';
+import { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar';
 import { Footer } from '@xyo-network/react-footer';
 import { ErrorBoundary } from '@xyo-network/react-shared';
 import { Helmet } from 'react-helmet';
 import { WebAppErrorPage } from './ErrorPage';
 export const WebAppChrome = ({ menuItems, navigationType = 'menu', footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
-    return (_jsxs(FlexCol, { alignItems: "stretch", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, { menuItems: navigationType === 'menu' ? menuItems : undefined }), _jsxs(FlexGrowRow, { alignItems: "stretch", children: [navigationType !== 'menu' ? (_jsxs(_Fragment, { children: [menuItems, _jsx(Divider, { orientation: "vertical" })] })) : null, _jsx(FlexGrowCol, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(WebAppErrorPage, {}), children: children }) })] }), _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) })] }));
+    return (_jsxs(FlexCol, { alignItems: "stretch", overflow: "hidden", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, { systemToolbar: _jsx(SystemToolbar, { menuItems: navigationType === 'menu' ? menuItems : undefined }) }), _jsxs(FlexGrowRow, { overflow: "hidden", alignItems: "stretch", children: [navigationType !== 'menu' ? (_jsxs(_Fragment, { children: [menuItems, _jsx(Divider, { orientation: "vertical" })] })) : null, _jsx(FlexGrowCol, { justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(WebAppErrorPage, {}), children: children }) })] }), _jsx(FlexCol, { alignItems: "stretch", children: _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) }) })] }));
 };
 //# sourceMappingURL=Chrome.js.map

package/dist/esm/components/Chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAW,MAAM,uBAAuB,CAAA;AAEhG,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAY7C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,SAAS,EAAE,cAAc,GAAG,MAAM,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/K,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACpD,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACR,MAAM,IAAI,KAAC,iBAAiB,IAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,EAC9F,MAAC,WAAW,IAAC,UAAU,EAAC,SAAS,aAC9B,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3B,8BACG,SAAS,EACV,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,IACjC,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC7E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,eAAe,KAAG,YAAG,QAAQ,GAAiB,GACzE,IACF,EACd,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,IACA,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEvF,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAY7C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,SAAS,EAAE,cAAc,GAAG,MAAM,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/K,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACtE,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACR,MAAM,IAAI,KAAC,iBAAiB,IAAC,aAAa,EAAE,KAAC,aAAa,IAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,GAAI,EAChI,MAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,UAAU,EAAC,SAAS,aAChD,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3B,8BACG,SAAS,EACV,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,IACjC,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC3D,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,eAAe,KAAG,YAAG,QAAQ,GAAiB,GACzE,IACF,EACd,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,YAC3B,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,GACA,IACF,CACX,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -17,10 +17,10 @@
     "@xylabs/react-flexbox": "^2.14.4",
     "@xylabs/react-pixel": "^2.14.4",
     "@xylabs/react-shared": "^2.14.4",
-    "@xyo-network/react-app-settings": "^2.25.65",
-    "@xyo-network/react-appbar": "^2.25.66",
-    "@xyo-network/react-footer": "^2.25.66",
-    "@xyo-network/react-shared": "^2.25.66",
+    "@xyo-network/react-app-settings": "^2.25.68",
+    "@xyo-network/react-appbar": "^2.25.69",
+    "@xyo-network/react-footer": "^2.25.69",
+    "@xyo-network/react-shared": "^2.25.69",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
@@ -85,6 +85,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.66",
+  "version": "2.25.69",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Chrome.stories.tsx

@@ -2,7 +2,7 @@
 import { Breadcrumbs, List } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { LinkEx } from '@xylabs/react-common'
-import { FlexCol } from '@xylabs/react-flexbox'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { SiteMenuListItem } from '@xyo-network/react-appbar'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -20,6 +20,8 @@ const StorybookEntry = {
   title: 'webapp/WebAppChrome',
 } as ComponentMeta<typeof WebAppChrome>
 
+const rowArray = [32, 64, 128, 256, 512, 1024]
+
 const Template: ComponentStory<typeof WebAppChrome> = (args) => {
   return (
     <FlexCol height="80vh" alignItems="stretch" overflow="hidden">
@@ -38,7 +40,15 @@ const Template: ComponentStory<typeof WebAppChrome> = (args) => {
                 <LinkEx>BreadCrumbs</LinkEx>
               </Breadcrumbs>
             }
-          />
+          >
+            {rowArray.map((height) => {
+              return (
+                <FlexRow key={height} bgcolor="red" height={height}>
+                  {height}
+                </FlexRow>
+              )
+            })}
+          </WebAppPage>
         </WebAppChrome>
       </BrowserRouter>
     </FlexCol>

package/src/components/Chrome.tsx

@@ -1,7 +1,7 @@
 import { Divider, Paper } from '@mui/material'
-import { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
 import { WebAppNavigationType } from '@xyo-network/react-app-settings'
-import { ApplicationAppBar } from '@xyo-network/react-appbar'
+import { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'
 import { Footer } from '@xyo-network/react-footer'
 import { ErrorBoundary } from '@xyo-network/react-shared'
 import { ReactNode } from 'react'
@@ -21,25 +21,27 @@ export interface WebAppChromeProps extends FlexBoxProps {
 
 export const WebAppChrome: React.FC<WebAppChromeProps> = ({ menuItems, navigationType = 'menu', footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
   return (
-    <FlexCol alignItems="stretch" height="100vh" {...props}>
+    <FlexCol alignItems="stretch" overflow="hidden" height="100vh" {...props}>
       <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>
         <meta content="website" property="og:type" />
       </Helmet>
-      {appbar ?? <ApplicationAppBar menuItems={navigationType === 'menu' ? menuItems : undefined} />}
-      <FlexGrowRow alignItems="stretch">
+      {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}
+      <FlexGrowRow overflow="hidden" alignItems="stretch">
         {navigationType !== 'menu' ? (
           <>
             {menuItems}
             <Divider orientation="vertical" />
           </>
         ) : null}
-        <FlexGrowCol overflow="hidden" justifyContent="flex-start" alignItems="stretch">
+        <FlexGrowCol justifyContent="flex-start" alignItems="stretch">
           <ErrorBoundary fallback={errorPage ?? <WebAppErrorPage />}>{children}</ErrorBoundary>
         </FlexGrowCol>
       </FlexGrowRow>
-      <Paper elevation={footerElevation} square>
-        {footer ?? <Footer dynamicHeight />}
-      </Paper>
+      <FlexCol alignItems="stretch">
+        <Paper elevation={footerElevation} square>
+          {footer ?? <Footer dynamicHeight />}
+        </Paper>
+      </FlexCol>
     </FlexCol>
   )
 }