diff --git a/.dumi/theme/builtins/Previewer/index.jsx b/.dumi/theme/builtins/Previewer/index.jsx
index 2a1af13f8c..33aea51788 100644
--- a/.dumi/theme/builtins/Previewer/index.jsx
+++ b/.dumi/theme/builtins/Previewer/index.jsx
@@ -1,7 +1,7 @@
 /* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
 import { CheckOutlined, SnippetsOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import stackblitzSdk from '@stackblitz/sdk';
-import { Alert, Badge, Tooltip } from 'antd';
+import { Alert, Badge, Tooltip, Space } from 'antd';
 import classNames from 'classnames';
 import LZString from 'lz-string';
 import React from 'react';
@@ -375,7 +375,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
             />
           </div>
           <div className="code-box-description">{introChildren}</div>
-          <div className="code-box-actions">
+          <Space wrap size="middle" className="code-box-actions">
             {showRiddleButton ? (
               <form
                 className="code-box-code-action"
@@ -466,7 +466,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
             <Tooltip
               title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
             >
-              <span className="code-expand-icon code-box-code-action">
+              <div className="code-expand-icon code-box-code-action">
                 <img
                   alt="expand code"
                   src={
@@ -487,9 +487,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
                   className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
                   onClick={() => this.handleCodeExpand(meta.id)}
                 />
-              </span>
+              </div>
             </Tooltip>
-          </div>
+          </Space>
         </section>
         <section className={highlightClass} key="code">
           <CodePreview
diff --git a/.dumi/theme/common/GlobalStyles.tsx b/.dumi/theme/common/GlobalStyles.tsx
index 8a6328b989..3ce43f826a 100644
--- a/.dumi/theme/common/GlobalStyles.tsx
+++ b/.dumi/theme/common/GlobalStyles.tsx
@@ -1004,6 +1004,9 @@ const GlobalStyles = () => {
             }
 
             .code-expand-icon {
+              width: 16px;
+              height: 16px;
+              position: relative;
               cursor: pointer;
             }
 
@@ -1086,7 +1089,6 @@ const GlobalStyles = () => {
               align-items: center;
               width: 16px;
               height: 16px;
-              margin-left: 16px;
               color: ${token.colorTextSecondary};
               cursor: pointer;
               transition: all 0.24s;
@@ -1096,14 +1098,6 @@ const GlobalStyles = () => {
                 margin-left: 0;
               }
 
-              &:first-child {
-                margin-left: 0;
-
-                ${antCls}-row-rtl & {
-                  margin-right: 0;
-                }
-              }
-
               &:hover {
                 color: ${token.colorText};
               }
diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
index cce7bf6397..cc3344dec2 100644
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -232,9 +232,9 @@ const Header: React.FC<HeaderProps> = (props) => {
   const onMenuVisibleChange = useCallback((visible: boolean) => {
     setHeaderState((prev) => ({ ...prev, menuVisible: visible }));
   }, []);
-  const onDirectionChange = useCallback(() => {
+  const onDirectionChange = () => {
     changeDirection?.(direction !== 'rtl' ? 'rtl' : 'ltr');
-  }, [direction]);
+  };
 
   useEffect(() => {
     handleHideMenu();