From 70ccc043cca0fe20b8f2afebb1947168ae412e7e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 18 Feb 2025 13:59:27 +0800
Subject: [PATCH] fix: Layout.Sider content overflow when collapsedWidth={0}
 (#52862)

---
 components/layout/style/sider.ts | 68 ++++++++++++++++----------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/components/layout/style/sider.ts b/components/layout/style/sider.ts
index c8a927c53d..d96a5b3a64 100644
--- a/components/layout/style/sider.ts
+++ b/components/layout/style/sider.ts
@@ -56,6 +56,10 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
         },
       },
 
+      [`&-zero-width ${componentCls}-children`]: {
+        overflow: 'hidden',
+      },
+
       [`${componentCls}-trigger`]: {
         position: 'fixed',
         bottom: 0,
@@ -69,44 +73,38 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
         transition: `all ${motionDurationMid}`,
       },
 
-      [`${componentCls}-zero-width`]: {
-        '> *': {
-          overflow: 'hidden',
+      [`${componentCls}-zero-width-trigger`]: {
+        position: 'absolute',
+        top: headerHeight,
+        insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
+        zIndex: 1,
+        width: zeroTriggerWidth,
+        height: zeroTriggerHeight,
+        color: triggerColor,
+        fontSize: token.fontSizeXL,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: siderBg,
+        borderRadius: `0 ${unit(borderRadiusLG)} ${unit(borderRadiusLG)} 0`,
+        cursor: 'pointer',
+        transition: `background ${motionDurationSlow} ease`,
+
+        '&::after': {
+          position: 'absolute',
+          inset: 0,
+          background: 'transparent',
+          transition: `all ${motionDurationSlow}`,
+          content: '""',
         },
 
-        '&-trigger': {
-          position: 'absolute',
-          top: headerHeight,
-          insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
-          zIndex: 1,
-          width: zeroTriggerWidth,
-          height: zeroTriggerHeight,
-          color: triggerColor,
-          fontSize: token.fontSizeXL,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: siderBg,
-          borderRadius: `0 ${unit(borderRadiusLG)} ${unit(borderRadiusLG)} 0`,
-          cursor: 'pointer',
-          transition: `background ${motionDurationSlow} ease`,
+        '&:hover::after': {
+          background: `rgba(255, 255, 255, 0.2)`,
+        },
 
-          '&::after': {
-            position: 'absolute',
-            inset: 0,
-            background: 'transparent',
-            transition: `all ${motionDurationSlow}`,
-            content: '""',
-          },
-
-          '&:hover::after': {
-            background: `rgba(255, 255, 255, 0.2)`,
-          },
-
-          '&-right': {
-            insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
-            borderRadius: `${unit(borderRadiusLG)} 0 0 ${unit(borderRadiusLG)}`,
-          },
+        '&-right': {
+          insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
+          borderRadius: `${unit(borderRadiusLG)} 0 0 ${unit(borderRadiusLG)}`,
         },
       },