fix: Modal width out of screen (#25765)

* style(modal): add max-width

* chore(modal): add custom width demo

* test(modal): add custom width snapshot

* Update modal.less

* Update modal.less

* Update width.md

* Update demo.test.js.snap

Co-authored-by: 偏右 <afc163@gmail.com>

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>
+    Open Modal of 1000px width
+  </span>
+</button>
+`;

components/modal/demo/width.md

@@ -0,0 +1,44 @@
+---
+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 React, { useState } from 'react';
+import { Modal, Button } from 'antd';
+
+const App = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button type="primary" onClick={() => setVisible(true)}>
+        Open Modal of 1000px width
+      </Button>
+      <Modal
+        title="Modal 1000px width"
+        centered
+        visible={visible}
+        onOk={() => setVisible(false)}
+        onCancel={() => setVisible(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

@@ -7,6 +7,7 @@
   position: relative;
   top: 100px;
   width: auto;
+  max-width: calc(100vw - 32px);
   margin: 0 auto;
   padding-bottom: 24px;