antd-mobile 5.2.1 → 5.2.2

package/cjs/components/modal/modal.css

@@ -16,48 +16,53 @@
   max-width: 75vw;
   transform: translate(-50%, -50%);
 }
-.adm-modal-main {
+.adm-modal-body {
   width: 100%;
   max-height: 70vh;
   box-sizing: border-box;
   font-size: 14px;
   background-color: white;
   border-radius: 8px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
-.adm-modal-main > * {
+.adm-modal-body > * {
   flex: none;
 }
-.adm-modal-main > .adm-modal-image-container {
+.adm-modal-body > .adm-modal-content {
   flex: auto;
 }
-.adm-modal-main .adm-modal-body {
-  padding: 20px 12px 12px;
-  display: flex;
-  flex-direction: column;
+.adm-modal-body:not(.adm-modal-with-image) {
+  padding-top: 20px;
 }
-.adm-modal-main .adm-modal-body > * + * {
-  margin-top: 8px;
+.adm-modal-body .adm-modal-image-container {
+  margin-bottom: 12px;
+  max-height: 40vh;
+  overflow-y: scroll;
 }
-.adm-modal-main .adm-modal-body-header-wrapper {
-  display: flex;
-  justify-content: center;
+.adm-modal-body .adm-modal-header {
+  margin-bottom: 8px;
+  padding: 0 12px;
 }
-.adm-modal-main .adm-modal-body-title {
+.adm-modal-body .adm-modal-title {
+  margin-bottom: 8px;
+  padding: 0 12px;
   font-weight: bold;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
 }
-.adm-modal-main .adm-modal-body-content {
+.adm-modal-body .adm-modal-content {
+  padding: 0 12px 12px;
+  max-height: 70vh;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-size: 15px;
   line-height: 1.4;
   color: #333;
 }
-.adm-modal-main .adm-modal-close {
+.adm-modal-body .adm-modal-close {
   position: absolute;
   right: 8px;
   top: 8px;
@@ -69,6 +74,10 @@
   user-select: none;
   padding: 8px 12px 12px;
 }
+.adm-modal-footer-empty {
+  padding: 0;
+  height: 8px;
+}
 .adm-modal-footer.adm-space {
   --gap-vertical: 20px;
 }
@@ -86,6 +95,3 @@
 .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
   opacity: 0.7;
 }
-.adm-modal-image-container {
-  overflow-y: auto;
-}

package/cjs/components/modal/modal.js

@@ -81,49 +81,29 @@ const Modal = p => {
     }
   });
   const [active, setActive] = (0, _react.useState)(props.visible);
-  const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: classPrefix,
-    style: {
-      display: active ? 'unset' : 'none'
-    }
-  }, _react.default.createElement(_mask.default, {
-    visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: (0, _classnames.default)(`${classPrefix}-mask`, props.maskClassName)
-  }), _react.default.createElement("div", {
-    className: `${classPrefix}-wrap`,
-    style: {
-      pointerEvents: props.visible ? 'unset' : 'none'
-    }
-  }, _react.default.createElement(_web.animated.div, {
-    style: Object.assign({}, style),
-    onClick: e => e.stopPropagation(),
-    className: `${classPrefix}-main`
+
+  const body = _react.default.createElement("div", {
+    className: (0, _classnames.default)(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    style: props.bodyStyle
   }, props.showCloseButton && _react.default.createElement("a", {
-    className: (0, _classnames.default)(`${classPrefix}-close`, 'adm-plain-anchor'),
+    className: (0, _classnames.default)(cls('close'), 'adm-plain-anchor'),
     onClick: props.onClose
   }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), !!props.image && _react.default.createElement("div", {
-    className: `${classPrefix}-image-container`
+    className: cls('image-container')
   }, _react.default.createElement(_image.default, {
     src: props.image,
     alt: 'modal header image',
     width: '100%'
-  })), _react.default.createElement("div", {
-    style: props.bodyStyle,
-    className: (0, _classnames.default)(`${classPrefix}-body`, props.bodyClassName)
-  }, !!props.header && _react.default.createElement("div", {
-    className: `${classPrefix}-body-header-wrapper`
-  }, _react.default.createElement("div", {
-    className: `${classPrefix}-body-header`
-  }, props.header)), !!props.title && _react.default.createElement("div", {
-    className: `${classPrefix}-body-title`
-  }, props.title), !!props.content && _react.default.createElement("div", {
-    className: `${classPrefix}-body-content`
-  }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content)), _react.default.createElement(_space.default, {
+  })), !!props.header && _react.default.createElement("div", {
+    className: cls('header')
+  }, _react.default.createElement(_autoCenter.default, null, props.header)), !!props.title && _react.default.createElement("div", {
+    className: cls('title')
+  }, props.title), _react.default.createElement("div", {
+    className: cls('content')
+  }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content), _react.default.createElement(_space.default, {
     direction: 'vertical',
     block: true,
-    className: `${classPrefix}-footer`
+    className: (0, _classnames.default)(cls('footer'), props.actions.length === 0 && cls('footer-empty'))
   }, props.actions.map((action, index) => {
     return _react.default.createElement(_modalActionButton.ModalActionButton, {
       key: action.key,
@@ -138,8 +118,31 @@ const Modal = p => {
         }
       })
     });
-  })))))));
+  })));
+
+  const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: cls(),
+    style: {
+      display: active ? 'unset' : 'none'
+    }
+  }, _react.default.createElement(_mask.default, {
+    visible: props.visible,
+    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
+    style: props.maskStyle,
+    className: (0, _classnames.default)(cls('mask'), props.maskClassName)
+  }), _react.default.createElement("div", {
+    className: cls('wrap'),
+    style: {
+      pointerEvents: props.visible ? 'unset' : 'none'
+    }
+  }, _react.default.createElement(_web.animated.div, {
+    style: style
+  }, body)))));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
 };
 
-exports.Modal = Modal;
+exports.Modal = Modal;
+
+function cls(name = '') {
+  return 'adm-modal' + (name && '-') + name;
+}

package/cjs/components/popover/arrow.js

@@ -17,10 +17,9 @@ const Arrow = (0, _react.memo)(props => {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
     viewBox: '0 0 30 16'
   }, _react.default.createElement("g", {
-    transform: 'translate(-1300.000000, -841.000000)',
     fill: 'currentColor'
   }, _react.default.createElement("path", {
-    d: 'M1300,841 L1330,841 L1318.07289,855.312538 C1316.65863,857.009645 1314.13637,857.238942 1312.43926,855.824685 C1312.25341,855.669808 1312.08199,855.49839 1311.92711,855.312538 L1300,841 L1300,841 Z'
+    d: 'M0,0 L30,0 L18.07289,14.312538 C16.65863,16.009645 14.13637,16.238942 12.43926,14.824685 C12.25341,14.669808 12.08199,14.49839 11.92711,14.312538 L0,0 L0,0 Z'
   }))));
 });
 exports.Arrow = Arrow;

package/cjs/components/switch/spin-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const SpinIcon: React.NamedExoticComponent<NativeProps<never>>;

package/cjs/components/switch/spin-icon.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpinIcon = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const SpinIcon = (0, _react.memo)(props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+    width: '28px',
+    height: '28px',
+    viewBox: '0 0 28 28'
+  }, _react.default.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, _react.default.createElement("g", {
+    transform: 'translate(-137.000000, -840.000000)',
+    fill: '#1576FE'
+  }, _react.default.createElement("g", {
+    transform: 'translate(80.000000, 823.000000)'
+  }, _react.default.createElement("g", {
+    transform: 'translate(53.000000, 13.000000)'
+  }, _react.default.createElement("path", {
+    d: 'M17.9996753,31.5 C10.5556724,31.5 4.5,25.4443275 4.5,18.0003247 C4.5,10.5563219 10.5556724,4.5 17.9996753,4.5 C18.5355492,4.5 18.9702974,4.93474816 18.9702974,5.47062208 C18.9702974,6.006496 18.5355492,6.44124416 17.9996753,6.44124416 C11.6261524,6.44124416 6.44124416,11.6267709 6.44124416,18.0002938 C6.44124416,24.3738167 11.6261524,29.5587249 17.9996753,29.5587249 C24.3731982,29.5587249 29.5587249,24.3738167 29.5587249,18.0002938 C29.5587249,14.7964616 28.2778291,11.8169616 25.9523687,9.61220279 C25.5637302,9.24317094 25.5473089,8.62893223 25.9157222,8.23967523 C26.2841356,7.84976878 26.8989928,7.83461537 27.2882498,8.20302872 C30.0042351,10.7787368 31.5,14.2580826 31.5,18.0002938 C31.5,25.4443275 25.4436781,31.5 17.9996753,31.5 Z'
+  })))))));
+});
+exports.SpinIcon = SpinIcon;

package/cjs/components/switch/switch.css

@@ -89,7 +89,7 @@
   cursor: not-allowed;
   opacity: 0.4;
 }
-.adm-switch-icon {
+.adm-switch-spin-icon {
   width: 14px;
   height: 14px;
   animation: loading-rotate 1s linear infinite;

package/cjs/components/switch/switch.js

@@ -11,14 +11,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _spin = _interopRequireDefault(require("../../assets/spin.svg"));
-
 var _nativeProps = require("../../utils/native-props");
 
 var _usePropsValue = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _spinIcon = require("./spin-icon");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -75,10 +75,8 @@ const Switch = p => {
     className: `${classPrefix}-checkbox`
   }, _react.default.createElement("div", {
     className: `${classPrefix}-handle`
-  }, (props.loading || changing) && _react.default.createElement("img", {
-    src: _spin.default,
-    className: `${classPrefix}-icon`,
-    alt: 'switch-handle'
+  }, (props.loading || changing) && _react.default.createElement(_spinIcon.SpinIcon, {
+    className: `${classPrefix}-spin-icon`
   })), _react.default.createElement("div", {
     className: `${classPrefix}-inner`
   }, checked ? props.checkedText : props.uncheckedText))));

package/es/components/date-picker/date-picker.js

@@ -31,7 +31,7 @@ export const DatePicker = p => {
     let date = value;
 
     if (date === null) {
-      date = new Date(bound(now.getDate(), props.min.getDate(), props.max.getDate()));
+      date = new Date(bound(now.getTime(), props.min.getTime(), props.max.getTime()));
     }
 
     return convertDateToStringArray(date, props.precision);

package/es/components/dialog/dialog.css

@@ -15,7 +15,7 @@
   max-width: 500px;
   transform: translate(-50%, -50%);
 }
-.adm-dialog-main {
+.adm-dialog-body {
   width: 100%;
   max-height: 70vh;
   font-size: 14px;
@@ -25,29 +25,33 @@
   display: flex;
   flex-direction: column;
 }
-.adm-dialog-main > * {
+.adm-dialog-body > * {
   flex: none;
 }
-.adm-dialog-main > .adm-dialog-image-container {
+.adm-dialog-body > .adm-dialog-content {
   flex: auto;
 }
-.adm-dialog-main > .adm-dialog-image-container + .adm-dialog-body {
-  padding-top: 12px;
+.adm-dialog-body:not(.adm-dialog-with-image) {
+  padding-top: 20px;
 }
-.adm-dialog-main .adm-dialog-body {
-  padding: 20px 12px;
+.adm-dialog-body .adm-dialog-image-container {
+  margin-bottom: 12px;
+  max-height: 40vh;
 }
-.adm-dialog-main .adm-dialog-body-header-wrapper {
-  display: flex;
-  justify-content: center;
+.adm-dialog-body .adm-dialog-header {
+  margin-bottom: 8px;
+  padding: 0 12px;
 }
-.adm-dialog-main .adm-dialog-body-title {
+.adm-dialog-body .adm-dialog-title {
+  margin-bottom: 8px;
+  padding: 0 12px;
   font-weight: bold;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-main .adm-dialog-body-content {
+.adm-dialog-body .adm-dialog-content {
+  padding: 0 12px 20px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -55,28 +59,32 @@
   line-height: 1.4;
   color: #333;
 }
-.adm-dialog-main .adm-dialog-footer {
+.adm-dialog-body .adm-dialog-content-empty {
+  padding: 0;
+  height: 12px;
+}
+.adm-dialog-body .adm-dialog-footer {
   user-select: none;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
   border-top: 0.5px solid var(--adm-border-color);
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
   font-size: 18px;
   line-height: 25px;
   border-radius: 0;
   border-right: solid 0.5px var(--adm-border-color);
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 .adm-dialog-image-container {

package/es/components/dialog/dialog.js

@@ -6,13 +6,11 @@ import { useUnmountedRef } from 'ahooks';
 import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
-import Space from '../space';
 import { renderToContainer } from '../../utils/render-to-container';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
 import AutoCenter from '../auto-center';
 import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
-const classPrefix = `adm-dialog`;
 const defaultProps = {
   visible: false,
   actions: [],
@@ -50,51 +48,27 @@ export const Dialog = p => {
     }
   });
   const [active, setActive] = useState(props.visible);
-  const node = withNativeProps(props, React.createElement("div", {
-    className: classPrefix,
-    style: {
-      display: active ? 'unset' : 'none'
-    }
-  }, React.createElement(Mask, {
-    visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: classNames(`${classPrefix}-mask`, props.maskClassName)
-  }), React.createElement("div", {
-    className: `${classPrefix}-wrap`,
-    style: {
-      pointerEvents: props.visible ? 'unset' : 'none'
-    }
-  }, React.createElement(animated.div, {
-    style: Object.assign({}, style),
-    onClick: e => e.stopPropagation(),
-    className: `${classPrefix}-main`
+  const body = React.createElement("div", {
+    className: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    style: props.bodyStyle
   }, !!props.image && React.createElement("div", {
-    className: `${classPrefix}-image-container`
+    className: cls('image-container')
   }, React.createElement(Image, {
     src: props.image,
     alt: 'dialog header image',
     width: '100%'
-  })), React.createElement("div", {
-    style: props.bodyStyle,
-    className: classNames(`${classPrefix}-body`, props.bodyClassName)
-  }, React.createElement(Space, {
-    direction: 'vertical',
-    block: true
-  }, !!props.header && React.createElement("div", {
-    className: `${classPrefix}-body-header-wrapper`
-  }, React.createElement("div", {
-    className: `${classPrefix}-body-header`
-  }, props.header)), !!props.title && React.createElement("div", {
-    className: `${classPrefix}-body-title`
-  }, props.title), !!props.content && React.createElement("div", {
-    className: `${classPrefix}-body-content`
-  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content))), React.createElement("div", {
-    className: `${classPrefix}-footer`
+  })), !!props.header && React.createElement("div", {
+    className: cls('header')
+  }, React.createElement(AutoCenter, null, props.header)), !!props.title && React.createElement("div", {
+    className: cls('title')
+  }, props.title), React.createElement("div", {
+    className: classNames(cls('content'), !props.content && cls('content-empty'))
+  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content), React.createElement("div", {
+    className: cls('footer')
   }, props.actions.map((row, index) => {
     const actions = Array.isArray(row) ? row : [row];
     return React.createElement("div", {
-      className: `${classPrefix}-action-row`,
+      className: cls('action-row'),
       key: index
     }, actions.map((action, index) => React.createElement(DialogActionButton, {
       key: action.key,
@@ -109,6 +83,28 @@ export const Dialog = p => {
         }
       })
     })));
-  }))))));
+  })));
+  const node = withNativeProps(props, React.createElement("div", {
+    className: cls(),
+    style: {
+      display: active ? 'unset' : 'none'
+    }
+  }, React.createElement(Mask, {
+    visible: props.visible,
+    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
+    style: props.maskStyle,
+    className: classNames(cls('mask'), props.maskClassName)
+  }), React.createElement("div", {
+    className: cls('wrap'),
+    style: {
+      pointerEvents: props.visible ? 'unset' : 'none'
+    }
+  }, React.createElement(animated.div, {
+    style: style
+  }, body))));
   return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
-};
+};
+
+function cls(name = '') {
+  return 'adm-dialog' + (name && '-') + name;
+}

package/es/components/dropdown/dropdown.css

@@ -3,9 +3,10 @@
 }
 .adm-dropdown .adm-dropdown-nav {
   display: flex;
+  border-bottom: 1px solid transparent;
 }
 .adm-dropdown-open .adm-dropdown-nav {
-  border-bottom: 1px solid var(--adm-border-color);
+  border-bottom-color: var(--adm-border-color);
 }
 .adm-dropdown-item {
   display: flex;

package/es/components/modal/modal.css

@@ -16,48 +16,53 @@
   max-width: 75vw;
   transform: translate(-50%, -50%);
 }
-.adm-modal-main {
+.adm-modal-body {
   width: 100%;
   max-height: 70vh;
   box-sizing: border-box;
   font-size: 14px;
   background-color: white;
   border-radius: 8px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
-.adm-modal-main > * {
+.adm-modal-body > * {
   flex: none;
 }
-.adm-modal-main > .adm-modal-image-container {
+.adm-modal-body > .adm-modal-content {
   flex: auto;
 }
-.adm-modal-main .adm-modal-body {
-  padding: 20px 12px 12px;
-  display: flex;
-  flex-direction: column;
+.adm-modal-body:not(.adm-modal-with-image) {
+  padding-top: 20px;
 }
-.adm-modal-main .adm-modal-body > * + * {
-  margin-top: 8px;
+.adm-modal-body .adm-modal-image-container {
+  margin-bottom: 12px;
+  max-height: 40vh;
+  overflow-y: scroll;
 }
-.adm-modal-main .adm-modal-body-header-wrapper {
-  display: flex;
-  justify-content: center;
+.adm-modal-body .adm-modal-header {
+  margin-bottom: 8px;
+  padding: 0 12px;
 }
-.adm-modal-main .adm-modal-body-title {
+.adm-modal-body .adm-modal-title {
+  margin-bottom: 8px;
+  padding: 0 12px;
   font-weight: bold;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
 }
-.adm-modal-main .adm-modal-body-content {
+.adm-modal-body .adm-modal-content {
+  padding: 0 12px 12px;
+  max-height: 70vh;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-size: 15px;
   line-height: 1.4;
   color: #333;
 }
-.adm-modal-main .adm-modal-close {
+.adm-modal-body .adm-modal-close {
   position: absolute;
   right: 8px;
   top: 8px;
@@ -69,6 +74,10 @@
   user-select: none;
   padding: 8px 12px 12px;
 }
+.adm-modal-footer-empty {
+  padding: 0;
+  height: 8px;
+}
 .adm-modal-footer.adm-space {
   --gap-vertical: 20px;
 }
@@ -86,6 +95,3 @@
 .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
   opacity: 0.7;
 }
-.adm-modal-image-container {
-  overflow-y: auto;
-}