From b0b13cf512ab9ed56a38cd691ee705c28f81413e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Mar 2020 17:52:29 +0800
Subject: [PATCH 1/2] :lipstick: fix PageHeader overflow hidden and responsive
 style

close #22020
---
 components/page-header/demo/content.md  | 48 +++++++++++++------------
 components/page-header/style/index.less |  8 ++---
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md
index 994b4d5a44..f27923e77b 100644
--- a/components/page-header/demo/content.md
+++ b/components/page-header/demo/content.md
@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-使用了 pageHeader 提供的所有能力。
+使用了 PageHeader 提供的所有能力。
 
 ## en-US
 
-Show all props.Used all the capabilities provided by pageHeader.
+Show all props provided by PageHeader.
 
 ```jsx
 import { PageHeader, Menu, Dropdown, Button, Tag, Typography, Row } from 'antd';
@@ -78,8 +78,6 @@ const IconLink = ({ src, text }) => (
   <a
     style={{
       marginRight: 16,
-      display: 'flex',
-      alignItems: 'center',
     }}
   >
     <img
@@ -87,14 +85,14 @@ const IconLink = ({ src, text }) => (
         marginRight: 8,
       }}
       src={src}
-      alt="start"
+      alt={text}
     />
     {text}
   </a>
 );
 
 const content = (
-  <div className="content">
+  <>
     <Paragraph>
       Ant Design interprets the color system into two levels: a system-level color system and a
       product-level color system.
@@ -104,7 +102,7 @@ const content = (
       easier for designers to have a clear psychological expectation of color when adjusting colors,
       as well as facilitate communication in teams.
     </Paragraph>
-    <Row className="contentLink">
+    <div>
       <IconLink
         src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
         text="Quick Start"
@@ -117,25 +115,15 @@ const content = (
         src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
         text="Product Doc"
       />
-    </Row>
-  </div>
+    </div>
+  </>
 );
 
 const Content = ({ children, extraContent }) => {
   return (
-    <Row className="content">
-      <div className="main" style={{ flex: 1 }}>
-        {children}
-      </div>
-      <div
-        className="extra"
-        style={{
-          marginLeft: 80,
-          marginTop: 16,
-        }}
-      >
-        {extraContent}
-      </div>
+    <Row>
+      <div style={{ flex: 1 }}>{children}</div>
+      <div className="image">{extraContent}</div>
     </Row>
   );
 };
@@ -162,6 +150,7 @@ ReactDOM.render(
         <img
           src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
           alt="content"
+          width="100%"
         />
       }
     >
@@ -171,3 +160,18 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+#components-page-header-demo-content .image {
+  margin: 0 0 0 60px;
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  #components-page-header-demo-content .image {
+    flex: 100%;
+    margin: 24px 0 0;
+  }
+}
+```
diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less
index 70029a7376..5a662fb2ad 100644
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@@ -57,7 +57,8 @@
 
   &-heading {
     width: 100%;
-    overflow: hidden;
+    .clearfix;
+
     &-title {
       display: block;
       float: left;
@@ -137,7 +138,6 @@
 
   &-content {
     padding-top: 12px;
-    overflow: hidden;
   }
 
   &-footer {
@@ -158,14 +158,14 @@
     }
   }
 
-  @media (max-width: @screen-sm) {
+  @media (max-width: @screen-md) {
     &-heading {
       &-extra {
         display: block;
         float: unset;
+        clear: both;
         width: 100%;
         padding-top: 12px;
-        overflow: hidden;
       }
     }
   }

From 412efba9c527af573d87856a25e4dfbc0c2f21a2 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Mar 2020 18:03:36 +0800
Subject: [PATCH 2/2] :white_check_mark: update snapshots

---
 .../__tests__/__snapshots__/demo.test.js.snap | 85 +++++++++----------
 1 file changed, 39 insertions(+), 46 deletions(-)

diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index 7a388ae4b1..c1ebf5c27d 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -630,68 +630,61 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
     class="ant-page-header-content"
   >
     <div
-      class="ant-row content"
+      class="ant-row"
     >
       <div
-        class="main"
         style="flex:1"
       >
         <div
-          class="content"
+          class="ant-typography"
         >
-          <div
-            class="ant-typography"
+          Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
+        </div>
+        <div
+          class="ant-typography"
+        >
+          Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
+        </div>
+        <div>
+          <a
+            style="margin-right:16px"
           >
-            Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
-          </div>
-          <div
-            class="ant-typography"
+            <img
+              alt="Quick Start"
+              src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
+              style="margin-right:8px"
+            />
+            Quick Start
+          </a>
+          <a
+            style="margin-right:16px"
           >
-            Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
-          </div>
-          <div
-            class="ant-row contentLink"
+            <img
+              alt=" Product Info"
+              src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
+              style="margin-right:8px"
+            />
+             Product Info
+          </a>
+          <a
+            style="margin-right:16px"
           >
-            <a
-              style="margin-right:16px;display:flex;align-items:center"
-            >
-              <img
-                alt="start"
-                src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
-                style="margin-right:8px"
-              />
-              Quick Start
-            </a>
-            <a
-              style="margin-right:16px;display:flex;align-items:center"
-            >
-              <img
-                alt="start"
-                src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
-                style="margin-right:8px"
-              />
-               Product Info
-            </a>
-            <a
-              style="margin-right:16px;display:flex;align-items:center"
-            >
-              <img
-                alt="start"
-                src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
-                style="margin-right:8px"
-              />
-              Product Doc
-            </a>
-          </div>
+            <img
+              alt="Product Doc"
+              src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
+              style="margin-right:8px"
+            />
+            Product Doc
+          </a>
         </div>
       </div>
       <div
-        class="extra"
-        style="margin-left:80px;margin-top:16px"
+        class="image"
       >
         <img
           alt="content"
           src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
+          width="100%"
         />
       </div>
     </div>