From b2276c35aee39fb7ee39254c3d5c48c9dea12881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= <qixian.cs@antgroup.com>
Date: Mon, 1 Jan 2024 10:59:43 +0800
Subject: [PATCH] fix(form): fix ProFormDateRangePicker readonly no warp error

close #7913
---
 .../src/components/RangePicker/index.tsx      |   9 +-
 .../__snapshots__/demo.test.ts.snap           |   8 +-
 tests/field/__snapshots__/demo.test.ts.snap   |   8 +-
 tests/field/__snapshots__/field.test.tsx.snap |  24 +++-
 tests/field/datePick.test.tsx                 |   4 +-
 tests/form/__snapshots__/demo.test.ts.snap    |  12 +-
 tests/layout/__snapshots__/demo.test.ts.snap  | 120 ------------------
 .../layout/__snapshots__/index.test.tsx.snap  |  21 ---
 .../layout/__snapshots__/mobile.test.tsx.snap |  21 ---
 .../__snapshots__/pageContainer.test.tsx.snap |   9 --
 .../pageHeaderWarp.test.tsx.snap              |   6 -
 tests/table/__snapshots__/demo.test.ts.snap   |  16 ++-
 12 files changed, 59 insertions(+), 199 deletions(-)

diff --git a/packages/field/src/components/RangePicker/index.tsx b/packages/field/src/components/RangePicker/index.tsx
index 67005ea687e8..cb863868c47b 100644
--- a/packages/field/src/components/RangePicker/index.tsx
+++ b/packages/field/src/components/RangePicker/index.tsx
@@ -65,7 +65,14 @@ const FieldRangePicker: ProFieldFC<
 
   if (mode === 'read') {
     const dom = (
-      <div ref={ref}>
+      <div
+        ref={ref}
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+        }}
+      >
         <div>{parsedStartText || '-'}</div>
         <div>{parsedEndText || '-'}</div>
       </div>
diff --git a/tests/descriptions/__snapshots__/demo.test.ts.snap b/tests/descriptions/__snapshots__/demo.test.ts.snap
index 34430ed6a73f..389229f1b919 100644
--- a/tests/descriptions/__snapshots__/demo.test.ts.snap
+++ b/tests/descriptions/__snapshots__/demo.test.ts.snap
@@ -698,7 +698,9 @@ exports[`descriptions demos > 📸 renders ./packages/descriptions/src/demos/bas
                     class="ant-descriptions-item-content"
                     style="min-width: 0;"
                   >
-                    <div>
+                    <div
+                      style="display: flex; flex-wrap: wrap; align-items: center;"
+                    >
                       <div>
                         2016-11-21 15:22:44
                       </div>
@@ -3359,7 +3361,9 @@ exports[`descriptions demos > 📸 renders ./packages/descriptions/src/demos/for
                     class="ant-descriptions-item-content"
                     style="min-width: 0;"
                   >
-                    <div>
+                    <div
+                      style="display: flex; flex-wrap: wrap; align-items: center;"
+                    >
                       <div>
                         2016.11.21 15:22:44
                       </div>
diff --git a/tests/field/__snapshots__/demo.test.ts.snap b/tests/field/__snapshots__/demo.test.ts.snap
index 624501699bf6..9c72fae20703 100644
--- a/tests/field/__snapshots__/demo.test.ts.snap
+++ b/tests/field/__snapshots__/demo.test.ts.snap
@@ -1183,7 +1183,9 @@ exports[`field demos > 📸 renders ./packages/field/src/demos/base.tsx correctl
                   <span
                     class="ant-descriptions-item-content"
                   >
-                    <div>
+                    <div
+                      style="display: flex; flex-wrap: wrap; align-items: center;"
+                    >
                       <div>
                         2019-11-15
                       </div>
@@ -1209,7 +1211,9 @@ exports[`field demos > 📸 renders ./packages/field/src/demos/base.tsx correctl
                   <span
                     class="ant-descriptions-item-content"
                   >
-                    <div>
+                    <div
+                      style="display: flex; flex-wrap: wrap; align-items: center;"
+                    >
                       <div>
                         2019-11-15 12:50:26
                       </div>
diff --git a/tests/field/__snapshots__/field.test.tsx.snap b/tests/field/__snapshots__/field.test.tsx.snap
index 5fb800e95d6a..9dee07605392 100644
--- a/tests/field/__snapshots__/field.test.tsx.snap
+++ b/tests/field/__snapshots__/field.test.tsx.snap
@@ -3206,7 +3206,9 @@ exports[`Field > 🐴 read and plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15
                     </div>
@@ -3484,7 +3486,9 @@ exports[`Field > 🐴 read and plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15 12:50:26
                     </div>
@@ -3510,7 +3514,9 @@ exports[`Field > 🐴 read and plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15 12:50:26
                     </div>
@@ -3785,7 +3791,9 @@ exports[`Field > 🐴 read ant no plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15
                     </div>
@@ -4032,7 +4040,9 @@ exports[`Field > 🐴 read ant no plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15 12:50:26
                     </div>
@@ -4058,7 +4068,9 @@ exports[`Field > 🐴 read ant no plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15 12:50:26
                     </div>
diff --git a/tests/field/datePick.test.tsx b/tests/field/datePick.test.tsx
index 558bcb2032c7..b79de3283193 100644
--- a/tests/field/datePick.test.tsx
+++ b/tests/field/datePick.test.tsx
@@ -173,8 +173,8 @@ describe('DateField', () => {
       />,
     );
 
-    expect(html.baseElement.innerHTML).toBe(
-      '<div><div><div>2016-11-22 15:22:44</div><div>2016-11-23 15:22:44</div></div></div>',
+    expect(html.baseElement.textContent).toBe(
+      '2016-11-22 15:22:442016-11-23 15:22:44',
     );
   });
 
diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
index a330fa5a63f6..c359ab5fefb3 100644
--- a/tests/form/__snapshots__/demo.test.ts.snap
+++ b/tests/form/__snapshots__/demo.test.ts.snap
@@ -6562,7 +6562,9 @@ exports[`form demos > 📸 renders ./packages/form/src/components/FieldSet/demos
                         <div
                           class="ant-form-item-control-input-content"
                         >
-                          <div>
+                          <div
+                            style="display: flex; flex-wrap: wrap; align-items: center;"
+                          >
                             <div>
                               2016-11-22
                             </div>
@@ -6605,7 +6607,9 @@ exports[`form demos > 📸 renders ./packages/form/src/components/FieldSet/demos
                         <div
                           class="ant-form-item-control-input-content"
                         >
-                          <div>
+                          <div
+                            style="display: flex; flex-wrap: wrap; align-items: center;"
+                          >
                             <div>
                               2016-11-22 15:22:44
                             </div>
@@ -16315,6 +16319,7 @@ exports[`form demos > 📸 renders ./packages/form/src/components/LoginForm/demo
             autoplay=""
             crossorigin="anonymous"
             loop=""
+            playsinline=""
             src="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
             style="width: 100%; height: 100%; object-fit: cover;"
           />
@@ -47950,9 +47955,6 @@ exports[`form demos > 📸 renders ./packages/form/src/demos/layout-footer.tsx c
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/demo.test.ts.snap b/tests/layout/__snapshots__/demo.test.ts.snap
index 83d76ff452ce..34c0fa7933db 100644
--- a/tests/layout/__snapshots__/demo.test.ts.snap
+++ b/tests/layout/__snapshots__/demo.test.ts.snap
@@ -4198,9 +4198,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/AlwaysDefaultOp
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout ant-layout-has-sider"
           style="min-height: 100%; flex-direction: row;"
@@ -4445,9 +4442,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/BreadcrumbsRepe
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -4750,9 +4744,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/DefaultOpenAllM
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout ant-layout-has-sider"
           style="min-height: 100%; flex-direction: row;"
@@ -4997,9 +4988,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/IconFont.tsx co
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -5244,9 +5232,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/MenuGroup.tsx c
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -5491,9 +5476,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/MultipleMenuOne
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -5760,9 +5742,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/Nested.tsx corr
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout ant-layout-has-sider"
           style="min-height: 100%; flex-direction: row;"
@@ -5777,9 +5756,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/Nested.tsx corr
               <div
                 class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-is-children ant-pro-layout-side"
               >
-                <div
-                  class="ant-pro-layout-bg-list"
-                />
                 <div
                   class="ant-layout"
                   style="min-height: 100%; flex-direction: row; height: 400px;"
@@ -5979,9 +5955,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/TopmenuNested.t
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -6162,9 +6135,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/TopmenuNested.t
               <div
                 class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-is-children ant-pro-layout-fix-siderbar ant-pro-layout-side"
               >
-                <div
-                  class="ant-pro-layout-bg-list"
-                />
                 <div
                   class="ant-layout"
                   style="min-height: 100%; flex-direction: row;"
@@ -6314,9 +6284,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/antd@4MenuIconF
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 500px; flex-direction: row;"
@@ -6795,9 +6762,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/api.tsx correct
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -7167,9 +7131,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/appList-group.t
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -7410,9 +7371,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/appList-group-s
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -9093,9 +9051,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/collapsedShowTi
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -9441,9 +9396,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/config-provider
     <div
       class="ant-design-pro qixian-pro-layout screen-xs qixian-pro-layout-fix-siderbar qixian-pro-layout-side"
     >
-      <div
-        class="qixian-pro-layout-bg-list"
-      />
       <div
         class="qixian-layout"
         style="min-height: 100%; flex-direction: row; max-height: 100vh;"
@@ -10827,9 +10779,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/customize-colla
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -11168,9 +11117,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/customizeMenu.t
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -11309,9 +11255,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/dark.tsx correc
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -11697,9 +11640,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/debug-demo.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -13327,9 +13267,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/dynamic-setting
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -14388,9 +14325,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/dynamicMenu.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -14710,9 +14644,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/error-boundarie
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -14944,9 +14875,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/footer.tsx corr
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -15674,9 +15602,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/ghost.tsx corre
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -16864,9 +16789,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/hideMenu.tsx co
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -17122,9 +17044,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/immersive-navig
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -17491,9 +17410,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/immersive-navig
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -18017,9 +17933,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/menu-group.tsx
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -19047,9 +18960,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/morse_debug.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -19769,9 +19679,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/searchMenu.tsx
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -20714,9 +20621,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -20906,9 +20810,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -20926,9 +20827,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -20985,9 +20883,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -21070,9 +20965,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -21161,9 +21053,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -21259,9 +21148,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -21391,9 +21277,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/theme.tsx corre
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -21782,9 +21665,6 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/top-breadcrumb.
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
       >
-        <div
-          class="ant-pro-layout-bg-list"
-        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/index.test.tsx.snap b/tests/layout/__snapshots__/index.test.tsx.snap
index b7ec93b9bf29..2f15b1664755 100644
--- a/tests/layout/__snapshots__/index.test.tsx.snap
+++ b/tests/layout/__snapshots__/index.test.tsx.snap
@@ -5,9 +5,6 @@ exports[`BasicLayout > 🥩 BasicLayout menu support menu.true 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -216,9 +213,6 @@ exports[`BasicLayout > 🥩 BasicLayout menu support menu.true 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -412,9 +406,6 @@ exports[`BasicLayout > 🥩 BasicLayout menu support menu.true 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -642,9 +633,6 @@ exports[`BasicLayout > 🥩 base use 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -858,9 +846,6 @@ exports[`BasicLayout > 🥩 compatibleStyle 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -1076,9 +1061,6 @@ exports[`BasicLayout > 🥩 contentStyle should change dom 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -1294,9 +1276,6 @@ exports[`BasicLayout > 🥩 mix layout hideInMenu render right 1`] = `
     <div
       class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout ant-layout-has-sider"
         style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/mobile.test.tsx.snap b/tests/layout/__snapshots__/mobile.test.tsx.snap
index 477a44c1db33..b4d6e9faef00 100644
--- a/tests/layout/__snapshots__/mobile.test.tsx.snap
+++ b/tests/layout/__snapshots__/mobile.test.tsx.snap
@@ -5,9 +5,6 @@ exports[`mobile BasicLayout > 📱 base use 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -198,9 +195,6 @@ exports[`mobile BasicLayout > 📱 collapsed=false 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -389,9 +383,6 @@ exports[`mobile BasicLayout > 📱 layout menuHeaderRender 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -455,9 +446,6 @@ exports[`mobile BasicLayout > 📱 layout menuHeaderRender 2`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -521,9 +509,6 @@ exports[`mobile BasicLayout > 📱 layout menuHeaderRender=false 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -586,9 +571,6 @@ exports[`mobile BasicLayout > 📱 layout=mix 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -781,9 +763,6 @@ exports[`mobile BasicLayout > 📱 layout=mix and splitMenus 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/pageContainer.test.tsx.snap b/tests/layout/__snapshots__/pageContainer.test.tsx.snap
index 9379aeeaa656..8ed2dfb1acc6 100644
--- a/tests/layout/__snapshots__/pageContainer.test.tsx.snap
+++ b/tests/layout/__snapshots__/pageContainer.test.tsx.snap
@@ -208,9 +208,6 @@ exports[`PageContainer > 🐲 FooterToolbar should know width 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -552,9 +549,6 @@ exports[`PageContainer > 🐲 footer should know width 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -797,9 +791,6 @@ exports[`PageContainer > 🐲 pro-layout support breadcrumbProps 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap b/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
index 6740bfdcb191..c5030a04e0cc 100644
--- a/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
+++ b/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
@@ -18,9 +18,6 @@ exports[`BasicLayout > base use 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -257,9 +254,6 @@ exports[`BasicLayout > content is text 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
-    <div
-      class="ant-pro-layout-bg-list"
-    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
diff --git a/tests/table/__snapshots__/demo.test.ts.snap b/tests/table/__snapshots__/demo.test.ts.snap
index 3aab23131c2f..6da89fddd956 100644
--- a/tests/table/__snapshots__/demo.test.ts.snap
+++ b/tests/table/__snapshots__/demo.test.ts.snap
@@ -49455,7 +49455,9 @@ exports[`table demos > 📸 renders ./packages/table/src/demos/valueTypeDate.tsx
                             <td
                               class="ant-table-cell"
                             >
-                              <div>
+                              <div
+                                style="display: flex; flex-wrap: wrap; align-items: center;"
+                              >
                                 <div>
                                   2016-11-22
                                 </div>
@@ -49467,7 +49469,9 @@ exports[`table demos > 📸 renders ./packages/table/src/demos/valueTypeDate.tsx
                             <td
                               class="ant-table-cell"
                             >
-                              <div>
+                              <div
+                                style="display: flex; flex-wrap: wrap; align-items: center;"
+                              >
                                 <div>
                                   2016-11-22 15:22:42
                                 </div>
@@ -49519,7 +49523,9 @@ exports[`table demos > 📸 renders ./packages/table/src/demos/valueTypeDate.tsx
                             <td
                               class="ant-table-cell"
                             >
-                              <div>
+                              <div
+                                style="display: flex; flex-wrap: wrap; align-items: center;"
+                              >
                                 <div>
                                   2016-11-22
                                 </div>
@@ -49531,7 +49537,9 @@ exports[`table demos > 📸 renders ./packages/table/src/demos/valueTypeDate.tsx
                             <td
                               class="ant-table-cell"
                             >
-                              <div>
+                              <div
+                                style="display: flex; flex-wrap: wrap; align-items: center;"
+                              >
                                 <div>
                                   2016-11-22 15:22:42
                                 </div>