@xyo-network/react-webapp 2.37.4 → 2.37.5

package/dist/esm/components/Body.d.ts

@@ -5,7 +5,8 @@ export interface WebAppBodyProps extends FlexBoxProps {
     breadcrumbs?: ReactNode;
     disableBreadcrumbGutter?: boolean;
     spacing?: string | number;
-    scrollingBreakpoint?: Breakpoint;
+    mobileScrollingBreakpoint?: Breakpoint;
+    variant?: 'scrollable' | 'fixed';
 }
 export declare const WebAppBody: React.FC<WebAppBodyProps>;
 //# sourceMappingURL=Body.d.ts.map

package/dist/esm/components/Body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/components/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiC,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,YAAY,EAAwB,MAAM,uBAAuB,CAAA;AAC1E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAwDxC,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,mBAAmB,CAAC,EAAE,UAAU,CAAA;CACjC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoBhD,CAAA"}
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/components/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiC,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,YAAY,EAAwB,MAAM,uBAAuB,CAAA;AAC1E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AA6DxC,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,yBAAyB,CAAC,EAAE,UAAU,CAAA;IACtC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,CAAA;CACjC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuBhD,CAAA"}

package/dist/esm/components/Body.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { experimental_sx as sx, styled } from '@mui/material';
 import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox';
+import { fixedContent, scrollableContent } from './lib';
 const WebAppBodyName = 'WebAppBody';
-const propsNotForwarded = ['scrollingBreakpoint', 'spacing', 'disableBreadcrumbGutter'];
+const propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'];
 const defaultStyledOptions = {
     shouldForwardProp: (prop) => !propsNotForwarded.includes(prop),
 };
@@ -10,16 +11,19 @@ const WebAppBodyRoot = styled(FlexGrowCol, {
     ...defaultStyledOptions,
     name: WebAppBodyName,
     slot: 'Root',
-})(({ spacing, theme, scrollingBreakpoint = 'sm' }) => sx({
-    alignItems: 'stretch',
-    gap: 1,
-    justifyContent: 'flex-start',
-    overflow: 'hidden',
-    paddingY: spacing,
-    [theme.breakpoints.down(scrollingBreakpoint)]: {
-        overflow: 'scroll',
-    },
-}));
+})(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {
+    const scrollable = variant === 'scrollable';
+    return sx({
+        alignItems: 'stretch',
+        gap: 1,
+        justifyContent: 'flex-start',
+        overflow: scrollable ? 'scroll' : 'hidden',
+        paddingY: spacing,
+        [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+            overflow: 'scroll',
+        },
+    });
+});
 const WebAppBodyBreadcrumb = styled(FlexRow, {
     ...defaultStyledOptions,
     name: WebAppBodyName,
@@ -36,17 +40,19 @@ const WebAppBodyScrollable = styled(FlexGrowCol, {
     ...defaultStyledOptions,
     name: WebAppBodyName,
     slot: 'Scrollable',
-})(({ theme, scrollingBreakpoint = 'sm' }) => ({
-    alignItems: 'stretch',
-    inset: 0,
-    justifyContent: 'start',
-    position: 'absolute',
-    [theme.breakpoints.down(scrollingBreakpoint)]: {
-        inset: 'unset',
-        position: 'relative',
-    },
-}));
-export const WebAppBody = ({ children, breadcrumbs, disableBreadcrumbGutter, scrollingBreakpoint, spacing = 1, ...props }) => {
-    return (_jsxs(WebAppBodyRoot, { scrollingBreakpoint: scrollingBreakpoint, spacing: spacing, ...props, children: [breadcrumbs ? (_jsx(WebAppBodyBreadcrumb, { disableBreadcrumbGutter: disableBreadcrumbGutter, spacing: spacing, children: breadcrumbs })) : null, _jsx(WebAppBodyScrollableWrapper, { children: _jsx(WebAppBodyScrollable, { scrollingBreakpoint: scrollingBreakpoint, children: children }) })] }));
+})(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {
+    const props = variant === 'scrollable' ? scrollableContent : fixedContent;
+    return {
+        ...props,
+        alignItems: 'stretch',
+        justifyContent: 'start',
+        [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+            inset: 'unset',
+            position: 'relative',
+        },
+    };
+});
+export const WebAppBody = ({ children, breadcrumbs, disableBreadcrumbGutter, mobileScrollingBreakpoint, spacing = 1, variant, ...props }) => {
+    return (_jsxs(WebAppBodyRoot, { mobileScrollingBreakpoint: mobileScrollingBreakpoint, spacing: spacing, variant: variant, ...props, children: [breadcrumbs ? (_jsx(WebAppBodyBreadcrumb, { disableBreadcrumbGutter: disableBreadcrumbGutter, spacing: spacing, children: breadcrumbs })) : null, _jsx(WebAppBodyScrollableWrapper, { children: _jsx(WebAppBodyScrollable, { mobileScrollingBreakpoint: mobileScrollingBreakpoint, variant: variant, children: children }) })] }));
 };
 //# sourceMappingURL=Body.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sourceRoot":"","sources":["../../../src/components/Body.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Body.js","sourceRoot":"","sources":["../../../src/components/Body.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAU,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,YAAY,EAAe,MAAM,uBAAuB,CAAA;AAEjE,OAAO,EAAkB,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInE,OAAO,EAAc,eAAe,EAAE,MAAM,QAAQ,CAAA;AAkBpD,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,YAAY;IACpE,SAAS,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,MAAM,CAAA;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAoD9D,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,mDAAa,CAAA"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAU,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,YAAY,EAAe,MAAM,uBAAuB,CAAA;AAEjE,OAAO,EAAkB,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInE,OAAO,EAAc,eAAe,EAAE,MAAM,QAAQ,CAAA;AAqBpD,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,YAAY;IACpE,SAAS,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,MAAM,CAAA;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAuD9D,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,mDAAa,CAAA"}

package/dist/esm/components/Page.js

@@ -6,22 +6,25 @@ import { useAsyncEffect } from '@xylabs/react-shared';
 import { Helmet } from 'react-helmet';
 import { useLocation } from 'react-router-dom';
 import { WebAppBody } from './Body';
+import { fixedWrap, scrollableWrap } from './lib';
 const WebAppPageRoot = styled(FlexGrowCol, {
     name: 'WebAppPage',
-    shouldForwardProp: (propName) => propName !== 'scrollingBreakpoint',
+    shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',
     slot: 'Root',
-})(({ theme, scrollingBreakpoint = 'sm' }) => ({
-    alignItems: 'stretch',
-    inset: 'unset',
-    justifyContent: 'start',
-    maxWidth: '100vw',
-    position: 'relative',
-    [theme.breakpoints.down(scrollingBreakpoint)]: {
-        inset: 0,
-        position: 'absolute',
-    },
-}));
-export const WebAppPage = ({ disableGutters, disableBreadcrumbGutter, title, container, children, breadcrumbs, scrollingBreakpoint, ...props }) => {
+})(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {
+    const props = variant === 'scrollable' ? scrollableWrap : fixedWrap;
+    return {
+        ...props,
+        alignItems: 'stretch',
+        justifyContent: 'start',
+        maxWidth: '100vw',
+        [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+            inset: 0,
+            position: 'absolute',
+        },
+    };
+});
+export const WebAppPage = ({ disableGutters, disableBreadcrumbGutter, title, container, children, breadcrumbs, mobileScrollingBreakpoint, variant = 'scrollable', ...props }) => {
     const userEvents = useUserEvents();
     const { pathname } = useLocation();
     useAsyncEffect(
@@ -29,7 +32,7 @@ export const WebAppPage = ({ disableGutters, disableBreadcrumbGutter, title, con
     async () => {
         await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname });
     }, [pathname, title, userEvents]);
-    return (_jsxs(WebAppPageRoot, { scrollingBreakpoint: scrollingBreakpoint, ...props, children: [_jsx(Helmet, { title: title }), container && container !== 'none' ? (_jsx(Container, { disableGutters: disableGutters, style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container, children: _jsx(WebAppBody, { disableBreadcrumbGutter: disableBreadcrumbGutter, breadcrumbs: breadcrumbs, scrollingBreakpoint: scrollingBreakpoint, ...props, children: children }) })) : (_jsx(WebAppBody, { disableBreadcrumbGutter: disableBreadcrumbGutter, breadcrumbs: breadcrumbs, scrollingBreakpoint: scrollingBreakpoint, paddingX: disableGutters ? 0 : 1, ...props, children: children }))] }));
+    return (_jsxs(WebAppPageRoot, { mobileScrollingBreakpoint: mobileScrollingBreakpoint, variant: variant, ...props, children: [_jsx(Helmet, { title: title }), container && container !== 'none' ? (_jsx(Container, { disableGutters: disableGutters, style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container, children: _jsx(WebAppBody, { disableBreadcrumbGutter: disableBreadcrumbGutter, breadcrumbs: breadcrumbs, mobileScrollingBreakpoint: mobileScrollingBreakpoint, variant: variant, ...props, children: children }) })) : (_jsx(WebAppBody, { disableBreadcrumbGutter: disableBreadcrumbGutter, breadcrumbs: breadcrumbs, mobileScrollingBreakpoint: mobileScrollingBreakpoint, paddingX: disableGutters ? 0 : 1, variant: variant, ...props, children: children }))] }));
 };
 /** @deprecated use WebAppPagePage instead */
 export const FlexPage = WebAppPage;

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

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAgB,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,UAAU,EAAmB,MAAM,QAAQ,CAAA;AAEpD,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,EAAE;IACzC,IAAI,EAAE,YAAY;IAClB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,qBAAqB;IACnE,IAAI,EAAE,MAAM;CACb,CAAC,CAAkB,CAAC,EAAE,KAAK,EAAE,mBAAmB,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9D,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,OAAO;IACd,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE,UAAU;IACpB,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE;QAC7C,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC,CAAA;AAOH,MAAM,CAAC,MAAM,UAAU,GAA4C,CAAC,EAClE,cAAc,EACd,uBAAuB,EACvB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAElC,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,MAAM,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,cAAc,EAAE,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC3F,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAA;IAED,OAAO,CACL,MAAC,cAAc,IAAC,mBAAmB,EAAE,mBAAmB,KAAM,KAAK,aACjE,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EACvB,SAAS,IAAI,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CACnC,KAAC,SAAS,IACR,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE,EACrH,QAAQ,EAAE,SAAS,YAEnB,KAAC,UAAU,IACT,uBAAuB,EAAE,uBAAuB,EAChD,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB,KACpC,KAAK,YAER,QAAQ,GACE,GACH,CACb,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,uBAAuB,EAAE,uBAAuB,EAChD,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAC5B,KAAK,YAER,QAAQ,GACE,CACd,IACc,CAClB,CAAA;AACH,CAAC,CAAA;AAED,6CAA6C;AAC7C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAA"}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/lib/cssValues.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+export declare const scrollableWrap: CSSProperties;
+export declare const fixedWrap: CSSProperties;
+export declare const scrollableContent: CSSProperties;
+export declare const fixedContent: CSSProperties;
+//# sourceMappingURL=cssValues.d.ts.map

package/dist/esm/components/lib/cssValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssValues.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/cssValues.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,eAAO,MAAM,cAAc,EAAE,aAGnB,CAAA;AAEV,eAAO,MAAM,SAAS,EAAE,aAGd,CAAA;AAGV,eAAO,MAAM,iBAAiB,EAAE,aAEtB,CAAA;AAEV,eAAO,MAAM,YAAY,EAAE,aAEjB,CAAA"}

package/dist/esm/components/lib/cssValues.js

@@ -0,0 +1,16 @@
+export const scrollableWrap = {
+    inset: 0,
+    position: 'absolute',
+};
+export const fixedWrap = {
+    inset: 'unset',
+    position: 'relative',
+};
+// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles
+export const scrollableContent = {
+    ...fixedWrap,
+};
+export const fixedContent = {
+    ...scrollableWrap,
+};
+//# sourceMappingURL=cssValues.js.map

package/dist/esm/components/lib/cssValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssValues.js","sourceRoot":"","sources":["../../../../src/components/lib/cssValues.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAkB;IAC3C,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,UAAU;CACZ,CAAA;AAEV,MAAM,CAAC,MAAM,SAAS,GAAkB;IACtC,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;CACZ,CAAA;AAEV,kGAAkG;AAClG,MAAM,CAAC,MAAM,iBAAiB,GAAkB;IAC9C,GAAG,SAAS;CACJ,CAAA;AAEV,MAAM,CAAC,MAAM,YAAY,GAAkB;IACzC,GAAG,cAAc;CACT,CAAA"}

package/dist/esm/components/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './cssValues';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/esm/components/lib/index.js

@@ -0,0 +1,2 @@
+export * from './cssValues';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/package.json

@@ -14,10 +14,10 @@
     "@xylabs/react-flexbox": "^2.15.1",
     "@xylabs/react-pixel": "^2.15.1",
     "@xylabs/react-shared": "^2.15.1",
-    "@xyo-network/react-app-settings": "^2.37.4",
-    "@xyo-network/react-appbar": "^2.37.4",
-    "@xyo-network/react-footer": "^2.37.4",
-    "@xyo-network/react-shared": "^2.37.4",
+    "@xyo-network/react-app-settings": "^2.37.5",
+    "@xyo-network/react-appbar": "^2.37.5",
+    "@xyo-network/react-footer": "^2.37.5",
+    "@xyo-network/react-shared": "^2.37.5",
     "react-helmet": "^6.1.0",
     "tslib": "^2.4.0"
   },
@@ -78,5 +78,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.37.4"
+  "version": "2.37.5"
 }

package/src/components/Body.tsx

@@ -2,8 +2,10 @@ import { Breakpoint, experimental_sx as sx, styled } from '@mui/material'
 import { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
 import React, { ReactNode } from 'react'
 
+import { fixedContent, scrollableContent } from './lib'
+
 const WebAppBodyName = 'WebAppBody'
-const propsNotForwarded = ['scrollingBreakpoint', 'spacing', 'disableBreadcrumbGutter']
+const propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']
 const defaultStyledOptions = {
   shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),
 }
@@ -12,18 +14,19 @@ const WebAppBodyRoot = styled(FlexGrowCol, {
   ...defaultStyledOptions,
   name: WebAppBodyName,
   slot: 'Root',
-})<WebAppBodyProps>(({ spacing, theme, scrollingBreakpoint = 'sm' }) =>
-  sx({
+})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {
+  const scrollable = variant === 'scrollable'
+  return sx({
     alignItems: 'stretch',
     gap: 1,
     justifyContent: 'flex-start',
-    overflow: 'hidden',
+    overflow: scrollable ? 'scroll' : 'hidden',
     paddingY: spacing,
-    [theme.breakpoints.down(scrollingBreakpoint)]: {
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
       overflow: 'scroll',
     },
-  }),
-)
+  })
+})
 
 const WebAppBodyBreadcrumb = styled(FlexRow, {
   ...defaultStyledOptions,
@@ -45,41 +48,47 @@ const WebAppBodyScrollable = styled(FlexGrowCol, {
   ...defaultStyledOptions,
   name: WebAppBodyName,
   slot: 'Scrollable',
-})<WebAppBodyProps>(({ theme, scrollingBreakpoint = 'sm' }) => ({
-  alignItems: 'stretch',
-  inset: 0,
-  justifyContent: 'start',
-  position: 'absolute',
-  [theme.breakpoints.down(scrollingBreakpoint)]: {
-    inset: 'unset',
-    position: 'relative',
-  },
-}))
+})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {
+  const props = variant === 'scrollable' ? scrollableContent : fixedContent
+  return {
+    ...props,
+    alignItems: 'stretch',
+    justifyContent: 'start',
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: 'unset',
+      position: 'relative',
+    },
+  }
+})
 
 export interface WebAppBodyProps extends FlexBoxProps {
   breadcrumbs?: ReactNode
   disableBreadcrumbGutter?: boolean
   spacing?: string | number
-  scrollingBreakpoint?: Breakpoint
+  mobileScrollingBreakpoint?: Breakpoint
+  variant?: 'scrollable' | 'fixed'
 }
 
 export const WebAppBody: React.FC<WebAppBodyProps> = ({
   children,
   breadcrumbs,
   disableBreadcrumbGutter,
-  scrollingBreakpoint,
+  mobileScrollingBreakpoint,
   spacing = 1,
+  variant,
   ...props
 }) => {
   return (
-    <WebAppBodyRoot scrollingBreakpoint={scrollingBreakpoint} spacing={spacing} {...props}>
+    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>
       {breadcrumbs ? (
         <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>
           {breadcrumbs}
         </WebAppBodyBreadcrumb>
       ) : null}
       <WebAppBodyScrollableWrapper>
-        <WebAppBodyScrollable scrollingBreakpoint={scrollingBreakpoint}>{children}</WebAppBodyScrollable>
+        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>
+          {children}
+        </WebAppBodyScrollable>
       </WebAppBodyScrollableWrapper>
     </WebAppBodyRoot>
   )

package/src/components/Chrome.stories.tsx

@@ -63,10 +63,10 @@ Default.args = {}
 const DefaultSideBar = Template.bind({})
 DefaultSideBar.args = { children: <Children />, navigationType: 'sidebar' }
 
-const DefaultAlwaysScrollable = Template.bind({})
-DefaultAlwaysScrollable.args = { children: <Children scrollingBreakpoint="xl" />, navigationType: 'sidebar' }
+const WithFixedSizePage = Template.bind({})
+WithFixedSizePage.args = { children: <Children variant="fixed" />, navigationType: 'sidebar' }
 
-export { Default, DefaultAlwaysScrollable, DefaultSideBar }
+export { Default, DefaultSideBar, WithFixedSizePage }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Page.tsx

@@ -6,22 +6,25 @@ import { Helmet } from 'react-helmet'
 import { useLocation } from 'react-router-dom'
 
 import { WebAppBody, WebAppBodyProps } from './Body'
+import { fixedWrap, scrollableWrap } from './lib'
 
 const WebAppPageRoot = styled(FlexGrowCol, {
   name: 'WebAppPage',
-  shouldForwardProp: (propName) => propName !== 'scrollingBreakpoint',
+  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',
   slot: 'Root',
-})<WebAppPageProps>(({ theme, scrollingBreakpoint = 'sm' }) => ({
-  alignItems: 'stretch',
-  inset: 'unset',
-  justifyContent: 'start',
-  maxWidth: '100vw',
-  position: 'relative',
-  [theme.breakpoints.down(scrollingBreakpoint)]: {
-    inset: 0,
-    position: 'absolute',
-  },
-}))
+})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {
+  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap
+  return {
+    ...props,
+    alignItems: 'stretch',
+    justifyContent: 'start',
+    maxWidth: '100vw',
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: 0,
+      position: 'absolute',
+    },
+  }
+})
 
 export interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {
   container?: ContainerProps['maxWidth'] | 'none'
@@ -35,7 +38,8 @@ export const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({
   container,
   children,
   breadcrumbs,
-  scrollingBreakpoint,
+  mobileScrollingBreakpoint,
+  variant = 'scrollable',
   ...props
 }) => {
   const userEvents = useUserEvents()
@@ -50,7 +54,7 @@ export const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({
   )
 
   return (
-    <WebAppPageRoot scrollingBreakpoint={scrollingBreakpoint} {...props}>
+    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>
       <Helmet title={title} />
       {container && container !== 'none' ? (
         <Container
@@ -61,7 +65,8 @@ export const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({
           <WebAppBody
             disableBreadcrumbGutter={disableBreadcrumbGutter}
             breadcrumbs={breadcrumbs}
-            scrollingBreakpoint={scrollingBreakpoint}
+            mobileScrollingBreakpoint={mobileScrollingBreakpoint}
+            variant={variant}
             {...props}
           >
             {children}
@@ -71,8 +76,9 @@ export const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({
         <WebAppBody
           disableBreadcrumbGutter={disableBreadcrumbGutter}
           breadcrumbs={breadcrumbs}
-          scrollingBreakpoint={scrollingBreakpoint}
+          mobileScrollingBreakpoint={mobileScrollingBreakpoint}
           paddingX={disableGutters ? 0 : 1}
+          variant={variant}
           {...props}
         >
           {children}

package/src/components/lib/cssValues.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react'
+
+export const scrollableWrap: CSSProperties = {
+  inset: 0,
+  position: 'absolute',
+} as const
+
+export const fixedWrap: CSSProperties = {
+  inset: 'unset',
+  position: 'relative',
+} as const
+
+// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles
+export const scrollableContent: CSSProperties = {
+  ...fixedWrap,
+} as const
+
+export const fixedContent: CSSProperties = {
+  ...scrollableWrap,
+} as const

package/src/components/lib/index.ts

@@ -0,0 +1 @@
+export * from './cssValues'