diff --git a/themes/commerce/components/Catalog.js b/themes/commerce/components/Catalog.js
index 5cf1e4ad..049c55b9 100644
--- a/themes/commerce/components/Catalog.js
+++ b/themes/commerce/components/Catalog.js
@@ -79,7 +79,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-red-600'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-red-600': ''}`}
               >
                 {tocItem.text}
               </span>
diff --git a/themes/fukasawa/components/Catalog.js b/themes/fukasawa/components/Catalog.js
index 7823ff74..0e1cde78 100644
--- a/themes/fukasawa/components/Catalog.js
+++ b/themes/fukasawa/components/Catalog.js
@@ -71,7 +71,7 @@ const Catalog = ({ toc }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
           >
             <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-              className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
+              className={`truncate ${activeSection === id ? 'font-bold text-red-400 underline' : ''}`}
               title={tocItem.text}
             >
               {tocItem.text}
diff --git a/themes/gitbook/components/Catalog.js b/themes/gitbook/components/Catalog.js
index ebee78ae..cf8e606f 100644
--- a/themes/gitbook/components/Catalog.js
+++ b/themes/gitbook/components/Catalog.js
@@ -74,7 +74,7 @@ const Catalog = ({ post }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-gray-500 underline'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index fb234c47..7d52f5a7 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -166,7 +166,7 @@ const LayoutBase = (props) => {
                     {/*  右侧侧推拉抽屉 */}
                     {fullWidth
                       ? null
-                      : <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
+                      : <div style={{ width: '20rem' }} className={'hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '}>
                       <div className='py-14 px-6 sticky top-0'>
                           <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
diff --git a/themes/heo/components/Catalog.js b/themes/heo/components/Catalog.js
index 81ea8d1a..1ec3dabb 100644
--- a/themes/heo/components/Catalog.js
+++ b/themes/heo/components/Catalog.js
@@ -74,7 +74,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-indigo-600'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}
               >
                 {tocItem.text}
               </span>
diff --git a/themes/hexo/components/Catalog.js b/themes/hexo/components/Catalog.js
index 3c167594..0bc2e616 100644
--- a/themes/hexo/components/Catalog.js
+++ b/themes/hexo/components/Catalog.js
@@ -79,7 +79,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-indigo-600'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}
               >
                 {tocItem.text}
               </span>
diff --git a/themes/matery/components/Catalog.js b/themes/matery/components/Catalog.js
index 45817545..490253fb 100644
--- a/themes/matery/components/Catalog.js
+++ b/themes/matery/components/Catalog.js
@@ -78,7 +78,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-green-500 underline overflow-ellipsis truncate'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-green-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>
diff --git a/themes/medium/components/Catalog.js b/themes/medium/components/Catalog.js
index 2706010a..cdb65fe4 100644
--- a/themes/medium/components/Catalog.js
+++ b/themes/medium/components/Catalog.js
@@ -76,7 +76,7 @@ const Catalog = ({ toc }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-green-500 underline'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-green-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>
diff --git a/themes/medium/index.js b/themes/medium/index.js
index 9648a866..1e3f365d 100644
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -102,7 +102,7 @@ const LayoutBase = props => {
                     {/* 桌面端右侧 */}
                     {fullWidth
                       ? null
-                      : <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}>
+                      : <div className={`hidden xl:block border-l dark:border-transparent w-80 flex-shrink-0 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}>
                             <div className='py-14 px-6 sticky top-0'>
                                 <Tabs>
                                     {slotRight}
diff --git a/themes/nav/components/Catalog.js b/themes/nav/components/Catalog.js
index ebee78ae..cf8e606f 100755
--- a/themes/nav/components/Catalog.js
+++ b/themes/nav/components/Catalog.js
@@ -74,7 +74,7 @@ const Catalog = ({ post }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-gray-500 underline'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>
diff --git a/themes/next/components/Toc.js b/themes/next/components/Toc.js
index b5ca01af..435679fd 100644
--- a/themes/next/components/Toc.js
+++ b/themes/next/components/Toc.js
@@ -74,7 +74,7 @@ const Toc = ({ toc }) => {
               className={`notion-table-of-contents-item duration-300 transform font-light
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
-              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} className={`${activeSection === id && ' font-bold text-red-400 underline'}`}>
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} className={`truncate ${activeSection === id ? ' font-bold text-red-400 underline' : ''}`}>
                 {tocItem.text}
               </span>
             </a>
diff --git a/themes/simple/components/Catalog.js b/themes/simple/components/Catalog.js
index c84ca9b3..928c3af8 100644
--- a/themes/simple/components/Catalog.js
+++ b/themes/simple/components/Catalog.js
@@ -73,7 +73,7 @@ const Catalog = ({ post }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
                         >
                             <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                                className={`${activeSection === id && ' font-bold text-red-600 underline overflow-ellipsis truncate'}`}
+                                className={`truncate ${activeSection === id ? ' font-bold text-red-600 underline' : ''}`}
                             >
                                 {tocItem.text}
                             </span>