diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index 57fe3392ead..8ba30d94d81 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -260,6 +260,7 @@ body #__docusaurus {
     border-radius: 8px;
     padding-block: 7px;
     padding-inline: 12px 6px;
+    width: 173px;
     font: var(--font-label-2);
     position: relative;
     color: var(--logto-color-text-secondary);
@@ -288,7 +289,6 @@ body #__docusaurus {
       color: var(--logto-color-text-secondary);
       padding: 0;
       margin-inline-start: 8px;
-      width: 90px;
       text-align: start;
     }
 
diff --git a/src/theme/DocItem/Layout/index.module.scss b/src/theme/DocItem/Layout/index.module.scss
index 4dc0c8cc9da..58be428a425 100644
--- a/src/theme/DocItem/Layout/index.module.scss
+++ b/src/theme/DocItem/Layout/index.module.scss
@@ -16,12 +16,12 @@
   }
 }
 
-.toc {
+.desktopToc {
   flex: 0 0 276px;
 }
 
-@media (min-width: 997px) {
-  .main.hasDocToc {
-    max-width: min(1000px, calc(100vw - 680px));
+@media (max-width: 996px) {
+  .desktopToc {
+    display: none;
   }
 }
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 49584bd7264..05a5183e7e2 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -10,7 +10,6 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import DocVersionBanner from '@theme/DocVersionBanner';
-import clsx from 'clsx';
 
 import styles from './index.module.scss';
 
@@ -43,7 +42,7 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
   const { metadata } = useDoc();
   return (
     <div className={styles.layout}>
-      <div className={clsx(styles.main, docTOC.desktop && styles.hasDocToc)}>
+      <div className={styles.main}>
         <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
@@ -57,7 +56,7 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className={styles.toc}>{docTOC.desktop}</div>}
+      {docTOC.desktop && <div className={styles.desktopToc}>{docTOC.desktop}</div>}
     </div>
   );
 }