fix: Modal width out of screen

components/modal/__tests__/__snapshots__/demo.test.js.snap

@@ -305,3 +305,14 @@ Array [
   </button>,
 ]
 `;
+
+exports[`renders ./components/modal/demo/width.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Vertically centered modal dialog
+  </span>
+</button>
+`;

components/modal/demo/width.md

@@ -0,0 +1,52 @@
+---
+order: 13
+title:
+  zh-CN: 自定义模态的宽度
+  en-US: To customize the width of modal
+---
+
+## zh-CN
+
+使用 `width` 来设置模态对话框的宽度。
+
+## en-US
+
+Use `width` to set the width of the modal dialog.
+
+```jsx
+import { Modal, Button } from 'antd';
+
+class App extends React.Component {
+  state = {
+    modalVisible: false,
+  };
+
+  setmodalVisible(modalVisible) {
+    this.setState({ modalVisible });
+  }
+
+  render() {
+    return (
+      <>
+        <Button type="primary" onClick={() => this.setmodalVisible(true)}>
+          Vertically centered modal dialog
+        </Button>
+        <Modal
+          title="Vertically centered modal dialog"
+          centered
+          visible={this.state.modalVisible}
+          onOk={() => this.setmodalVisible(false)}
+          onCancel={() => this.setmodalVisible(false)}
+          width={1000}
+        >
+          <p>some contents...</p>
+          <p>some contents...</p>
+          <p>some contents...</p>
+        </Modal>
+      </>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```

components/modal/style/modal.less

@@ -10,6 +10,7 @@
   margin: 0 auto;
   padding-bottom: 24px;
   pointer-events: none;
+  max-width: calc(100vw - 16px);
 
   &-wrap {
     position: fixed;
@@ -81,7 +82,8 @@
     padding: @modal-header-padding;
     color: @text-color;
     background: @modal-header-bg;
-    border-bottom: @modal-header-border-width @modal-header-border-style @modal-header-border-color-split;
+    border-bottom: @modal-header-border-width @modal-header-border-style
+      @modal-header-border-color-split;
     border-radius: @border-radius-base @border-radius-base 0 0;
   }
 
@@ -96,7 +98,8 @@
     padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
     text-align: right;
     background: @modal-footer-bg;
-    border-top: @modal-footer-border-width @modal-footer-border-style @modal-footer-border-color-split;
+    border-top: @modal-footer-border-width @modal-footer-border-style
+      @modal-footer-border-color-split;
     border-radius: 0 0 @border-radius-base @border-radius-base;
 
     button + button {
@@ -153,7 +156,6 @@
 
 @media (max-width: @screen-sm-max) {
   .@{dialog-prefix-cls} {
-    max-width: calc(100vw - 16px);
     margin: 8px auto;
   }
   .@{dialog-prefix-cls}-centered {