docs: tweak document content area width (#50625)

.dumi/hooks/useMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { Tag, version } from 'antd';
+import { Space, Tag, version } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
 import { useFullSidebarData, useSidebarData } from 'dumi';
@@ -22,7 +22,6 @@ const useStyle = createStyles(({ css, token }) => ({
     margin-inline-end: 0;
   `,
   subtitle: css`
-    margin-inline-start: ${token.marginXS}px;
     font-weight: normal;
     font-size: ${token.fontSizeSM}px;
     opacity: 0.8;
@@ -46,10 +45,10 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
   if (!before && !after) {
     return (
       <Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
-        <span>
-          {title}
+        <Space>
+          <span>{title}</span>
           {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
-        </span>
+        </Space>
         {tag && (
           <Tag
             bordered={false}

.dumi/theme/slots/Content/DocAnchor.tsx

@@ -5,7 +5,7 @@ import type { AnchorLinkItemProps } from 'antd/es/anchor/Anchor';
 import classNames from 'classnames';
 import { useRouteMeta, useTabMeta } from 'dumi';
 
-const useStyle = createStyles(({ token, css }) => {
+export const useStyle = createStyles(({ token, css }) => {
   const { antCls } = token;
   return {
     anchorToc: css`
@@ -19,13 +19,13 @@ const useStyle = createStyles(({ token, css }) => {
     `,
     tocWrapper: css`
       position: fixed;
-      top: ${token.headerHeight + token.contentMarginTop - 8}px;
+      top: ${token.headerHeight + token.contentMarginTop - 4}px;
       inset-inline-end: 0;
-      width: 160px;
-      padding: ${token.paddingXS}px;
+      width: 148px;
+      padding: 0;
       border-radius: ${token.borderRadius}px;
       box-sizing: border-box;
-      margin-inline-end: calc(16px - 100vw + 100%);
+      margin-inline-end: calc(8px - 100vw + 100%);
       z-index: 10;
       .toc-debug {
         color: ${token.purple6};
@@ -48,15 +48,11 @@ const useStyle = createStyles(({ token, css }) => {
       }
     `,
     articleWrapper: css`
-      padding: 0 170px 32px 64px;
-
-      &.rtl {
-        padding: 0 64px 144px 170px;
-      }
+      padding-inline: 48px 164px;
+      padding-block: 0 32px;
 
       @media only screen and (max-width: ${token.screenLG}px) {
-        &,
-        &.rtl {
+        & {
           padding: 0 ${token.paddingLG * 2}px;
         }
       }

.dumi/theme/slots/Content/index.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
 import { Col, Flex, Space, Typography } from 'antd';
-import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { FormattedMessage, useRouteMeta } from 'dumi';
 
@@ -11,6 +10,7 @@ import type { DemoContextProps } from '../DemoContext';
 import DemoContext from '../DemoContext';
 import SiteContext from '../SiteContext';
 import InViewSuspense from './InViewSuspense';
+import { useStyle } from './DocAnchor';
 
 const Contributors = React.lazy(() => import('./Contributors'));
 const ColumnCard = React.lazy(() => import('./ColumnCard'));
@@ -21,21 +21,6 @@ const PrevAndNext = React.lazy(() => import('../../common/PrevAndNext'));
 const ComponentChangelog = React.lazy(() => import('../../common/ComponentChangelog'));
 const EditButton = React.lazy(() => import('../../common/EditButton'));
 
-const useStyle = createStyles(({ token, css }) => ({
-  articleWrapper: css`
-    padding: 0 170px 32px 64px;
-    &.rtl {
-      padding: 0 64px 144px 170px;
-    }
-    @media only screen and (max-width: ${token.screenLG}px) {
-      &,
-      &.rtl {
-        padding: 0 ${token.paddingLG * 2}px;
-      }
-    }
-  `,
-}));
-
 const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
   const meta = useRouteMeta();
   const { pathname, hash } = useLocation();
@@ -107,9 +92,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
                 version={meta.frontmatter.tag}
               />
             )}
-          <div style={{ minHeight: 'calc(100vh - 64px)', width: 'calc(100% - 10px)' }}>
-            {children}
-          </div>
+          <div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
           <InViewSuspense>
             <ColumnCard
               zhihuLink={meta.frontmatter.zhihu_url}

.dumi/theme/slots/Sidebar/index.tsx

@@ -53,12 +53,7 @@ const useStyle = createStyles(({ token, css }) => {
           > ${antCls}-menu-item-group
           > ${antCls}-menu-item-group-list
           > ${antCls}-menu-item {
-          padding-inline-start: 40px !important;
-
-          ${antCls}-row-rtl & {
-            padding-inline-end: 40px !important;
-            padding-inline-start: ${token.padding}px !important;
-          }
+          padding-inline: 36px 12px !important;
         }
 
         // Nest Category > Type > Article
@@ -96,8 +91,6 @@ const useStyle = createStyles(({ token, css }) => {
     `,
     mainMenu: css`
       z-index: 1;
-
-      .main-menu-inner {
         position: sticky;
         top: ${token.headerHeight + token.contentMarginTop}px;
         width: 100%;
@@ -106,9 +99,12 @@ const useStyle = createStyles(({ token, css }) => {
         overflow: hidden;
         scrollbar-width: thin;
         scrollbar-color: unset;
-      }
 
-      &:hover .main-menu-inner {
+        .ant-menu {
+          padding: 0 4px;
+        }
+
+      &:hover {
         overflow-y: auto;
       }
     `,
@@ -144,7 +140,7 @@ const Sidebar: React.FC = () => {
     <MobileMenu key="Mobile-menu">{menuChild}</MobileMenu>
   ) : (
     <Col xxl={4} xl={5} lg={6} md={6} sm={24} xs={24} className={styles.mainMenu}>
-      <section className="main-menu-inner">{menuChild}</section>
+      {menuChild}
     </Col>
   );
 };