fix: make outline have a well width (#693)

web-infra-dev · Mar 3, 2024 · b13bcc4 · b13bcc4
1 parent f07b64f
commit b13bcc4
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/.changeset/shy-eagles-laugh.md b/.changeset/shy-eagles-laugh.md
@@ -0,0 +1,5 @@
+---
+"@rspress/theme-default": patch
+---
+
+fix(theme-default): make outline have a well width again
diff --git a/packages/theme-default/src/layout/DocLayout/index.module.scss b/packages/theme-default/src/layout/DocLayout/index.module.scss
@@ -106,7 +106,9 @@
     :global(.rspress-doc-footer) {
       padding: 0 48px;
       box-sizing: border-box;
-      width: 100%;
+      width: calc(100vw - var(--rp-sidebar-width) - var(--rp-aside-width));
+      max-width: calc(960px + 48px * 2);
+      margin: auto;
     }
   }
 }
@@ -120,17 +122,10 @@
   .content {
     :global(.rspress-doc),
     :global(.rspress-doc-footer) {
-      box-sizing: content-box;
+      box-sizing: border-box;
       width: calc(100vw - var(--rp-sidebar-width) - var(--rp-aside-width));
-      padding: 0
-        max(
-          48px,
-          calc(
-            (100vw - var(--rp-sidebar-width) - var(--rp-aside-width) - 960px) /
-              2
-          )
-        );
-      max-width: 960px;
+      padding: 0 48px;
+      max-width: calc(960px + 48px * 2);
       margin: auto;
     }
   }

diff --git a/packages/theme-default/src/layout/DocLayout/index.tsx b/packages/theme-default/src/layout/DocLayout/index.tsx
@@ -74,7 +74,7 @@ export function DocLayout(props: DocLayoutProps) {
       <div
         className={`${styles.content} rspress-doc-container flex flex-shrink-0 mx-auto`}
       >
-        <div className="w-full">
+        <div className="w-full overflow-hidden flex-1">
           {isOverviewPage ? (
             <Overview content={docContent} />
           ) : (

diff --git a/packages/theme-default/src/styles/vars.css b/packages/theme-default/src/styles/vars.css
@@ -4,7 +4,7 @@
 :root {
   --rp-nav-height: 72px;
   --rp-sidebar-width: 320px;
-  --rp-aside-width: 368px;
+  --rp-aside-width: 268px;
 }
 
 :root {