From 54d9afef13b21f3a502048941f787dfcda0d910a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= <qixian.cs@outlook.com>
Date: Mon, 17 Jul 2023 22:01:09 +0800
Subject: [PATCH] fix(layout): fix FooterToolBar width error

close https://github.com/ant-design/pro-components/issues/7333
---
 packages/layout/src/ProLayout.tsx             |  2 +-
 .../__snapshots__/demo.test.ts.snap           |  4 ++--
 tests/field/__snapshots__/demo.test.ts.snap   |  4 ++--
 tests/field/__snapshots__/field.test.tsx.snap |  8 ++++----
 tests/form/__snapshots__/demo.test.ts.snap    |  4 ++--
 tests/layout/__snapshots__/demo.test.ts.snap  |  4 ++--
 tests/layout/pageContainer.test.tsx           |  4 ++--
 tests/table/__snapshots__/demo.test.ts.snap   | 20 +++++++++----------
 8 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx
index dcea4333d456..fc5e7216269f 100644
--- a/packages/layout/src/ProLayout.tsx
+++ b/packages/layout/src/ProLayout.tsx
@@ -398,7 +398,7 @@ const getpaddingInlineStart = (
   siderWidth: number,
 ): number | undefined => {
   if (hasLeftPadding) {
-    return collapsed ? 60 : siderWidth;
+    return collapsed ? 64 : siderWidth;
   }
   return 0;
 };
diff --git a/tests/descriptions/__snapshots__/demo.test.ts.snap b/tests/descriptions/__snapshots__/demo.test.ts.snap
index 2188559c3350..859d04dac506 100644
--- a/tests/descriptions/__snapshots__/demo.test.ts.snap
+++ b/tests/descriptions/__snapshots__/demo.test.ts.snap
@@ -723,7 +723,7 @@ exports[`descriptions demos 📸 renders ./packages/descriptions/src/demos/base.
                   class="ant-descriptions-item-content"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                   >
                     <code>
                       
@@ -756,7 +756,7 @@ Done in 9.70s.
                   class="ant-descriptions-item-content"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                   >
                     <code>
                       {
diff --git a/tests/field/__snapshots__/demo.test.ts.snap b/tests/field/__snapshots__/demo.test.ts.snap
index fca89977ad05..a04b053ed7f5 100644
--- a/tests/field/__snapshots__/demo.test.ts.snap
+++ b/tests/field/__snapshots__/demo.test.ts.snap
@@ -1357,7 +1357,7 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base.tsx correctly
                   class="ant-descriptions-item-content"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                   >
                     <code>
                       
@@ -1390,7 +1390,7 @@ Done in 9.70s.
                   class="ant-descriptions-item-content"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                   >
                     <code>
                       {
diff --git a/tests/field/__snapshots__/field.test.tsx.snap b/tests/field/__snapshots__/field.test.tsx.snap
index 082bdb6c851b..cc9f66a0f9c3 100644
--- a/tests/field/__snapshots__/field.test.tsx.snap
+++ b/tests/field/__snapshots__/field.test.tsx.snap
@@ -3579,7 +3579,7 @@ exports[`Field 🐴 read and plain 1`] = `
                   class="ant-descriptions-item-content"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                   >
                     <code>
                       
@@ -3608,7 +3608,7 @@ Done in 9.70s.
                   class="ant-descriptions-item-content"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                   >
                     <code>
                       {
@@ -4129,7 +4129,7 @@ exports[`Field 🐴 read ant no plain 1`] = `
                   class="ant-descriptions-item-content"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                   >
                     <code>
                       
@@ -4158,7 +4158,7 @@ Done in 9.70s.
                   class="ant-descriptions-item-content"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                   >
                     <code>
                       {
diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
index 7f507b089bad..e64c17e8839a 100644
--- a/tests/form/__snapshots__/demo.test.ts.snap
+++ b/tests/form/__snapshots__/demo.test.ts.snap
@@ -11931,7 +11931,7 @@ exports[`form demos 📸 renders ./packages/form/src/components/Group/demos/cust
                 </div>
               </div>
               <pre
-                style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
               >
                 <code>
                   {
@@ -49115,7 +49115,7 @@ exports[`form demos 📸 renders ./packages/form/src/demos/layout-footer.tsx cor
                         </div>
                         <div
                           class="ant-pro-footer-bar"
-                          style="width: calc(100% - 60px);"
+                          style="width: calc(100% - 64px);"
                         >
                           <div
                             class="ant-pro-footer-bar-left"
diff --git a/tests/layout/__snapshots__/demo.test.ts.snap b/tests/layout/__snapshots__/demo.test.ts.snap
index 86dda293fff6..a5a3b1d19e9a 100644
--- a/tests/layout/__snapshots__/demo.test.ts.snap
+++ b/tests/layout/__snapshots__/demo.test.ts.snap
@@ -1620,7 +1620,7 @@ exports[`layout demos 📸 renders ./packages/layout/src/components/WaterMark/de
                 role="separator"
               />
               <pre
-                style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
               >
                 <code>
                   &lt;WaterMark
@@ -14286,7 +14286,7 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/collapsedShowTitl
           </div>
           <div
             class="ant-pro-footer-bar"
-            style="width: calc(100% - 60px);"
+            style="width: calc(100% - 64px);"
           >
             <div
               class="ant-pro-footer-bar-left"
diff --git a/tests/layout/pageContainer.test.tsx b/tests/layout/pageContainer.test.tsx
index 008f35301748..cf0a7792b11b 100644
--- a/tests/layout/pageContainer.test.tsx
+++ b/tests/layout/pageContainer.test.tsx
@@ -281,7 +281,7 @@ describe('PageContainer', () => {
     );
 
     expect(container.querySelector('.ant-pro-footer-bar')).toHaveStyle(
-      'width: calc(100% - 60px)',
+      'width: calc(100% - 64px)',
     );
 
     rerender(
@@ -332,7 +332,7 @@ describe('PageContainer', () => {
     );
 
     expect(container.querySelector('.ant-pro-footer-bar')).toHaveStyle(
-      'width: calc(100% - 60px)',
+      'width: calc(100% - 64px)',
     );
 
     rerender(
diff --git a/tests/table/__snapshots__/demo.test.ts.snap b/tests/table/__snapshots__/demo.test.ts.snap
index 60cca3d7dd1b..6db2c2e86883 100644
--- a/tests/table/__snapshots__/demo.test.ts.snap
+++ b/tests/table/__snapshots__/demo.test.ts.snap
@@ -2917,7 +2917,7 @@ exports[`table demos 📸 renders ./packages/table/src/components/EditableTable/
       class="ant-pro-card-body"
     >
       <pre
-        style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px; width: 100%;"
+        style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px; width: 100%;"
       >
         <code>
           [
@@ -3357,7 +3357,7 @@ exports[`table demos 📸 renders ./packages/table/src/components/EditableTable/
       class="ant-pro-card-body"
     >
       <pre
-        style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px; width: 100%;"
+        style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px; width: 100%;"
       >
         <code>
           [
@@ -3738,7 +3738,7 @@ exports[`table demos 📸 renders ./packages/table/src/components/EditableTable/
       class="ant-pro-card-body"
     >
       <pre
-        style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px; width: 100%;"
+        style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px; width: 100%;"
       >
         <code>
           [
@@ -4249,7 +4249,7 @@ exports[`table demos 📸 renders ./packages/table/src/components/EditableTable/
                   class="ant-pro-card-body"
                 >
                   <pre
-                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px; width: 100%;"
+                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px; width: 100%;"
                   >
                     <code>
                       [
@@ -10549,7 +10549,7 @@ exports[`table demos 📸 renders ./packages/table/src/components/EditableTable/
       class="ant-pro-card-body"
     >
       <pre
-        style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px; width: 100%;"
+        style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px; width: 100%;"
       >
         <code>
           [
@@ -44104,7 +44104,7 @@ exports[`table demos 📸 renders ./packages/table/src/demos/split.tsx correctly
                                   class="ant-table-cell"
                                 >
                                   <pre
-                                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                                   >
                                     <code>
                                       const getData = async params =&gt; {
@@ -44139,7 +44139,7 @@ exports[`table demos 📸 renders ./packages/table/src/demos/split.tsx correctly
                                   class="ant-table-cell"
                                 >
                                   <pre
-                                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                                   >
                                     <code>
                                       const getData = async params =&gt; {
@@ -44174,7 +44174,7 @@ exports[`table demos 📸 renders ./packages/table/src/demos/split.tsx correctly
                                   class="ant-table-cell"
                                 >
                                   <pre
-                                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                                    style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                                   >
                                     <code>
                                       const getData = async params =&gt; {
@@ -46315,7 +46315,7 @@ exports[`table demos 📸 renders ./packages/table/src/demos/valueType.tsx corre
                             class="ant-table-cell"
                           >
                             <pre
-                              style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                              style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                             >
                               <code>
                                 const getData = async params =&gt; {
@@ -46439,7 +46439,7 @@ exports[`table demos 📸 renders ./packages/table/src/demos/valueType.tsx corre
                             class="ant-table-cell"
                           >
                             <pre
-                              style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px;"
+                              style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px;"
                             >
                               <code>
                                 const getData = async params =&gt; {