@instructure/ui-modal 10.11.1-snapshot-14 → 10.11.1-snapshot-17

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.11.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-14) (2025-02-21)
+## [10.11.1-snapshot-17](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-17) (2025-02-21)
 
-**Note:** Version bump only for package @instructure/ui-modal
+
+### Bug Fixes
+
+* **ui-modal:** make Modal's header non-sticky with small window height ([db5c708](https://github.com/instructure/instructure-ui/commit/db5c7082ec4834793d83cf7d6f469c4fbaa83eed))
 
 
 

package/es/Modal/ModalHeader/props.js

@@ -26,7 +26,8 @@ import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['default', 'inverse']),
-  spacing: PropTypes.oneOf(['default', 'compact'])
+  spacing: PropTypes.oneOf(['default', 'compact']),
+  smallViewPort: PropTypes.bool
 };
 const allowedProps = ['children', 'variant', 'spacing'];
 export { propTypes, allowedProps };

package/es/Modal/ModalHeader/styles.js

@@ -34,7 +34,8 @@
  */
 const generateStyle = (componentTheme, props, state) => {
   const variant = props.variant,
-    spacing = props.spacing;
+    spacing = props.spacing,
+    smallViewPort = props.smallViewPort;
   const withCloseButton = state.withCloseButton;
   const sizeVariants = {
     default: {
@@ -63,6 +64,9 @@ const generateStyle = (componentTheme, props, state) => {
       borderBottomWidth: '0.0625rem',
       borderBottomStyle: 'solid',
       borderBottomColor: componentTheme.borderColor,
+      ...(smallViewPort ? {
+        position: 'relative'
+      } : {}),
       ...sizeVariants[spacing],
       ...inverseStyle
     }

package/es/Modal/index.js

@@ -30,6 +30,7 @@ import { Children, Component, isValidElement } from 'react';
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
+import { canUseDOM } from '@instructure/ui-dom-utils';
 import { Transition } from '@instructure/ui-motion';
 import { Portal } from '@instructure/ui-portal';
 import { Dialog } from '@instructure/ui-dialog';
@@ -57,6 +58,11 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
     this.handleRef = el => {
       this.ref = el;
     };
+    this.updateHeight = () => {
+      this.setState({
+        windowHeight: window.innerHeight
+      });
+    };
     this.handlePortalOpen = DOMNode => {
       this.DOMNode = DOMNode;
     };
@@ -71,14 +77,27 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
         this.props.contentRef(el);
       }
     };
+    this.getWindowHeightInRem = () => {
+      var _getComputedStyle;
+      if (!canUseDOM) {
+        return Infinity;
+      }
+      const rootFontSize = parseFloat(((_getComputedStyle = getComputedStyle(document.documentElement)) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.fontSize) || '16');
+      if (isNaN(rootFontSize) || rootFontSize <= 0) {
+        return Infinity;
+      }
+      return window.innerHeight / rootFontSize;
+    };
     this.state = {
       transitioning: false,
-      open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false
+      open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false,
+      windowHeight: 99999
     };
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    window.addEventListener('resize', this.updateHeight);
   }
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
@@ -90,6 +109,9 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
     }
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  }
   get defaultFocusElement() {
     return this.props.defaultFocusElement;
   }
@@ -111,31 +133,76 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       children = _this$props3.children,
       variant = _this$props3.variant,
       overflow = _this$props3.overflow;
+
+    // header should be non-sticky for small viewport height (ca. 320px)
+    if (this.getWindowHeightInRem() <= 20) {
+      return this.renderForSmallViewportHeight();
+    }
     return Children.map(children, child => {
       if (!child) return; // ignore null, falsy children
+      return this.cloneChildWithProps(child, variant, overflow);
+    });
+  }
+  renderForSmallViewportHeight() {
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      variant = _this$props4.variant,
+      overflow = _this$props4.overflow,
+      styles = _this$props4.styles;
+    const headerAndBody = [];
+    const childrenArray = Children.toArray(children);
 
+    // Separate header and body elements
+    const filteredChildren = childrenArray.filter(child => {
       if (/*#__PURE__*/isValidElement(child)) {
-        var _child$props;
-        return safeCloneElement(child, {
-          variant: variant,
-          overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
-        });
-      } else {
-        return child;
+        if (child.type === Modal.Header || child.type === Modal.Body) {
+          if (child.type === Modal.Header) {
+            const headerWithProp = safeCloneElement(child, {
+              smallViewPort: true
+            });
+            headerAndBody.push(headerWithProp);
+          } else {
+            headerAndBody.push(child);
+          }
+          return false;
+        }
       }
+      return true;
     });
+
+    // Adds the <div> to the beginning of the filteredChildren array
+    if (headerAndBody.length > 0) {
+      filteredChildren.unshift(jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody
+      }, headerAndBody));
+    }
+    return Children.map(filteredChildren, child => {
+      if (!child) return; // ignore null, falsy children
+      return this.cloneChildWithProps(child, variant, overflow);
+    });
+  }
+  cloneChildWithProps(child, variant, overflow) {
+    if (/*#__PURE__*/isValidElement(child)) {
+      var _child$props;
+      return safeCloneElement(child, {
+        variant: variant,
+        overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
+      });
+    } else {
+      return child;
+    }
   }
   renderDialog(props) {
-    const _this$props4 = this.props,
-      onDismiss = _this$props4.onDismiss,
-      label = _this$props4.label,
-      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
-      shouldReturnFocus = _this$props4.shouldReturnFocus,
-      liveRegion = _this$props4.liveRegion,
-      size = _this$props4.size,
-      constrain = _this$props4.constrain,
-      as = _this$props4.as,
-      styles = _this$props4.styles;
+    const _this$props5 = this.props,
+      onDismiss = _this$props5.onDismiss,
+      label = _this$props5.label,
+      shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
+      shouldReturnFocus = _this$props5.shouldReturnFocus,
+      liveRegion = _this$props5.liveRegion,
+      size = _this$props5.size,
+      constrain = _this$props5.constrain,
+      as = _this$props5.as,
+      styles = _this$props5.styles;
     const isFullScreen = size === 'fullscreen';
     const dialog = jsx(Dialog, Object.assign({}, passthroughProps(props), {
       as: as,
@@ -163,22 +230,22 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
   }
   render() {
     var _this$props$styles;
-    const _this$props5 = this.props,
-      open = _this$props5.open,
-      onOpen = _this$props5.onOpen,
-      onClose = _this$props5.onClose,
-      mountNode = _this$props5.mountNode,
-      insertAt = _this$props5.insertAt,
-      transition = _this$props5.transition,
-      onEnter = _this$props5.onEnter,
-      onEntering = _this$props5.onEntering,
-      onEntered = _this$props5.onEntered,
-      onExit = _this$props5.onExit,
-      onExiting = _this$props5.onExiting,
-      onExited = _this$props5.onExited,
-      constrain = _this$props5.constrain,
-      overflow = _this$props5.overflow,
-      passthroughProps = _objectWithoutProperties(_this$props5, _excluded);
+    const _this$props6 = this.props,
+      open = _this$props6.open,
+      onOpen = _this$props6.onOpen,
+      onClose = _this$props6.onClose,
+      mountNode = _this$props6.mountNode,
+      insertAt = _this$props6.insertAt,
+      transition = _this$props6.transition,
+      onEnter = _this$props6.onEnter,
+      onEntering = _this$props6.onEntering,
+      onEntered = _this$props6.onEntered,
+      onExit = _this$props6.onExit,
+      onExiting = _this$props6.onExiting,
+      onExited = _this$props6.onExited,
+      constrain = _this$props6.constrain,
+      overflow = _this$props6.overflow,
+      passthroughProps = _objectWithoutProperties(_this$props6, _excluded);
     const portalIsOpen = this.state.open || this.state.transitioning;
     return jsx(Portal, {
       mountNode: mountNode,

package/es/Modal/styles.js

@@ -98,6 +98,10 @@ const generateStyle = (componentTheme, props) => {
       position: 'relative',
       width: '100%',
       height: '100%'
+    },
+    joinedHeaderAndBody: {
+      borderRadius: componentTheme.borderRadius,
+      overflowY: 'scroll'
     }
   };
 };

package/lib/Modal/ModalHeader/props.js

@@ -33,6 +33,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 const propTypes = exports.propTypes = {
   children: _propTypes.default.node,
   variant: _propTypes.default.oneOf(['default', 'inverse']),
-  spacing: _propTypes.default.oneOf(['default', 'compact'])
+  spacing: _propTypes.default.oneOf(['default', 'compact']),
+  smallViewPort: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['children', 'variant', 'spacing'];

package/lib/Modal/ModalHeader/styles.js

@@ -40,7 +40,8 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props, state) => {
   const variant = props.variant,
-    spacing = props.spacing;
+    spacing = props.spacing,
+    smallViewPort = props.smallViewPort;
   const withCloseButton = state.withCloseButton;
   const sizeVariants = {
     default: {
@@ -69,6 +70,9 @@ const generateStyle = (componentTheme, props, state) => {
       borderBottomWidth: '0.0625rem',
       borderBottomStyle: 'solid',
       borderBottomColor: componentTheme.borderColor,
+      ...(smallViewPort ? {
+        position: 'relative'
+      } : {}),
       ...sizeVariants[spacing],
       ...inverseStyle
     }

package/lib/Modal/index.js

@@ -30,6 +30,7 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
+var _canUseDOM = require("@instructure/ui-dom-utils/lib/canUseDOM.js");
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 var _Portal = require("@instructure/ui-portal/lib/Portal");
 var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
@@ -83,6 +84,11 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     this.handleRef = el => {
       this.ref = el;
     };
+    this.updateHeight = () => {
+      this.setState({
+        windowHeight: window.innerHeight
+      });
+    };
     this.handlePortalOpen = DOMNode => {
       this.DOMNode = DOMNode;
     };
@@ -97,14 +103,27 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         this.props.contentRef(el);
       }
     };
+    this.getWindowHeightInRem = () => {
+      var _getComputedStyle;
+      if (!_canUseDOM.canUseDOM) {
+        return Infinity;
+      }
+      const rootFontSize = parseFloat(((_getComputedStyle = getComputedStyle(document.documentElement)) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.fontSize) || '16');
+      if (isNaN(rootFontSize) || rootFontSize <= 0) {
+        return Infinity;
+      }
+      return window.innerHeight / rootFontSize;
+    };
     this.state = {
       transitioning: false,
-      open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false
+      open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false,
+      windowHeight: 99999
     };
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    window.addEventListener('resize', this.updateHeight);
   }
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
@@ -116,6 +135,9 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     }
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  }
   get defaultFocusElement() {
     return this.props.defaultFocusElement;
   }
@@ -137,31 +159,76 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       children = _this$props3.children,
       variant = _this$props3.variant,
       overflow = _this$props3.overflow;
+
+    // header should be non-sticky for small viewport height (ca. 320px)
+    if (this.getWindowHeightInRem() <= 20) {
+      return this.renderForSmallViewportHeight();
+    }
     return _react.Children.map(children, child => {
       if (!child) return; // ignore null, falsy children
+      return this.cloneChildWithProps(child, variant, overflow);
+    });
+  }
+  renderForSmallViewportHeight() {
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      variant = _this$props4.variant,
+      overflow = _this$props4.overflow,
+      styles = _this$props4.styles;
+    const headerAndBody = [];
+    const childrenArray = _react.Children.toArray(children);
 
+    // Separate header and body elements
+    const filteredChildren = childrenArray.filter(child => {
       if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
-        var _child$props;
-        return (0, _safeCloneElement.safeCloneElement)(child, {
-          variant: variant,
-          overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
-        });
-      } else {
-        return child;
+        if (child.type === Modal.Header || child.type === Modal.Body) {
+          if (child.type === Modal.Header) {
+            const headerWithProp = (0, _safeCloneElement.safeCloneElement)(child, {
+              smallViewPort: true
+            });
+            headerAndBody.push(headerWithProp);
+          } else {
+            headerAndBody.push(child);
+          }
+          return false;
+        }
       }
+      return true;
     });
+
+    // Adds the <div> to the beginning of the filteredChildren array
+    if (headerAndBody.length > 0) {
+      filteredChildren.unshift((0, _emotion.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody
+      }, headerAndBody));
+    }
+    return _react.Children.map(filteredChildren, child => {
+      if (!child) return; // ignore null, falsy children
+      return this.cloneChildWithProps(child, variant, overflow);
+    });
+  }
+  cloneChildWithProps(child, variant, overflow) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+      var _child$props;
+      return (0, _safeCloneElement.safeCloneElement)(child, {
+        variant: variant,
+        overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
+      });
+    } else {
+      return child;
+    }
   }
   renderDialog(props) {
-    const _this$props4 = this.props,
-      onDismiss = _this$props4.onDismiss,
-      label = _this$props4.label,
-      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
-      shouldReturnFocus = _this$props4.shouldReturnFocus,
-      liveRegion = _this$props4.liveRegion,
-      size = _this$props4.size,
-      constrain = _this$props4.constrain,
-      as = _this$props4.as,
-      styles = _this$props4.styles;
+    const _this$props5 = this.props,
+      onDismiss = _this$props5.onDismiss,
+      label = _this$props5.label,
+      shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
+      shouldReturnFocus = _this$props5.shouldReturnFocus,
+      liveRegion = _this$props5.liveRegion,
+      size = _this$props5.size,
+      constrain = _this$props5.constrain,
+      as = _this$props5.as,
+      styles = _this$props5.styles;
     const isFullScreen = size === 'fullscreen';
     const dialog = (0, _emotion.jsx)(_Dialog.Dialog, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       as: as,
@@ -189,22 +256,22 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   }
   render() {
     var _this$props$styles;
-    const _this$props5 = this.props,
-      open = _this$props5.open,
-      onOpen = _this$props5.onOpen,
-      onClose = _this$props5.onClose,
-      mountNode = _this$props5.mountNode,
-      insertAt = _this$props5.insertAt,
-      transition = _this$props5.transition,
-      onEnter = _this$props5.onEnter,
-      onEntering = _this$props5.onEntering,
-      onEntered = _this$props5.onEntered,
-      onExit = _this$props5.onExit,
-      onExiting = _this$props5.onExiting,
-      onExited = _this$props5.onExited,
-      constrain = _this$props5.constrain,
-      overflow = _this$props5.overflow,
-      passthroughProps = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
+    const _this$props6 = this.props,
+      open = _this$props6.open,
+      onOpen = _this$props6.onOpen,
+      onClose = _this$props6.onClose,
+      mountNode = _this$props6.mountNode,
+      insertAt = _this$props6.insertAt,
+      transition = _this$props6.transition,
+      onEnter = _this$props6.onEnter,
+      onEntering = _this$props6.onEntering,
+      onEntered = _this$props6.onEntered,
+      onExit = _this$props6.onExit,
+      onExiting = _this$props6.onExiting,
+      onExited = _this$props6.onExited,
+      constrain = _this$props6.constrain,
+      overflow = _this$props6.overflow,
+      passthroughProps = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
     const portalIsOpen = this.state.open || this.state.transitioning;
     return (0, _emotion.jsx)(_Portal.Portal, {
       mountNode: mountNode,

package/lib/Modal/styles.js

@@ -104,6 +104,10 @@ const generateStyle = (componentTheme, props) => {
       position: 'relative',
       width: '100%',
       height: '100%'
+    },
+    joinedHeaderAndBody: {
+      borderRadius: componentTheme.borderRadius,
+      overflowY: 'scroll'
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "10.11.1-snapshot-14",
+  "version": "10.11.1-snapshot-17",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,30 +24,30 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.11.1-snapshot-14",
-    "@instructure/emotion": "10.11.1-snapshot-14",
-    "@instructure/shared-types": "10.11.1-snapshot-14",
-    "@instructure/ui-buttons": "10.11.1-snapshot-14",
-    "@instructure/ui-dialog": "10.11.1-snapshot-14",
-    "@instructure/ui-dom-utils": "10.11.1-snapshot-14",
-    "@instructure/ui-motion": "10.11.1-snapshot-14",
-    "@instructure/ui-overlays": "10.11.1-snapshot-14",
-    "@instructure/ui-portal": "10.11.1-snapshot-14",
-    "@instructure/ui-prop-types": "10.11.1-snapshot-14",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-14",
-    "@instructure/ui-testable": "10.11.1-snapshot-14",
-    "@instructure/ui-utils": "10.11.1-snapshot-14",
-    "@instructure/ui-view": "10.11.1-snapshot-14",
+    "@instructure/console": "10.11.1-snapshot-17",
+    "@instructure/emotion": "10.11.1-snapshot-17",
+    "@instructure/shared-types": "10.11.1-snapshot-17",
+    "@instructure/ui-buttons": "10.11.1-snapshot-17",
+    "@instructure/ui-dialog": "10.11.1-snapshot-17",
+    "@instructure/ui-dom-utils": "10.11.1-snapshot-17",
+    "@instructure/ui-motion": "10.11.1-snapshot-17",
+    "@instructure/ui-overlays": "10.11.1-snapshot-17",
+    "@instructure/ui-portal": "10.11.1-snapshot-17",
+    "@instructure/ui-prop-types": "10.11.1-snapshot-17",
+    "@instructure/ui-react-utils": "10.11.1-snapshot-17",
+    "@instructure/ui-testable": "10.11.1-snapshot-17",
+    "@instructure/ui-utils": "10.11.1-snapshot-17",
+    "@instructure/ui-view": "10.11.1-snapshot-17",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "react": ">=16.14 <=18"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-14",
-    "@instructure/ui-color-utils": "10.11.1-snapshot-14",
-    "@instructure/ui-position": "10.11.1-snapshot-14",
-    "@instructure/ui-themes": "10.11.1-snapshot-14",
+    "@instructure/ui-babel-preset": "10.11.1-snapshot-17",
+    "@instructure/ui-color-utils": "10.11.1-snapshot-17",
+    "@instructure/ui-position": "10.11.1-snapshot-17",
+    "@instructure/ui-themes": "10.11.1-snapshot-17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/Modal/ModalHeader/props.ts

@@ -36,6 +36,7 @@ type ModalHeaderOwnProps = {
   children?: React.ReactNode
   variant?: 'default' | 'inverse'
   spacing?: 'default' | 'compact'
+  smallViewPort?: boolean
 }
 
 type ModalHeaderStyleProps = {
@@ -55,7 +56,8 @@ type ModalHeaderStyle = ComponentStyle<'modalHeader'>
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['default', 'inverse']),
-  spacing: PropTypes.oneOf(['default', 'compact'])
+  spacing: PropTypes.oneOf(['default', 'compact']),
+  smallViewPort: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']

package/src/Modal/ModalHeader/styles.ts

@@ -44,7 +44,7 @@ const generateStyle = (
   props: ModalHeaderProps,
   state: ModalHeaderStyleProps
 ): ModalHeaderStyle => {
-  const { variant, spacing } = props
+  const { variant, spacing, smallViewPort } = props
   const { withCloseButton } = state
 
   const sizeVariants = {
@@ -83,6 +83,7 @@ const generateStyle = (
       borderBottomWidth: '0.0625rem',
       borderBottomStyle: 'solid',
       borderBottomColor: componentTheme.borderColor,
+      ...(smallViewPort ? { position: 'relative' } : {}),
       ...sizeVariants[spacing!],
       ...inverseStyle
     }

package/src/Modal/README.md

@@ -1180,6 +1180,7 @@ type: embed
     <Figure.Item>When a user closes a modal, focus must return to a logical place within the page. This is usually the element that triggered opening the modal</Figure.Item>
     <Figure.Item>Modals should be able to be closed by clicking away, esc key and/or a close button</Figure.Item>
     <Figure.Item>We recommend that modals begin with a heading (typically H2)</Figure.Item>
+    <Figure.Item>The Modal's header currently becomes non-sticky when the window height is too small, improving navigation of the Modal.Body, e.g., at higher zoom levels</Figure.Item>
   </Figure>
 </Guidelines>
 ```