diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index a6a79e7b..6e95ff52 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -45,7 +45,7 @@ export const LayoutSlug = props => {
         >
 
             <div id='inner-wrapper'>
-                <div className={'drop-shadow-xl max-w-4xl'}>
+                <div className={'drop-shadow-xl w-full lg:max-w-3xl 2xl:max-w-4xl'}>
                     <div className="-mt-32 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
                         {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -112,7 +112,7 @@ export const LayoutSlug = props => {
                             data-aos-once="false"
                             data-aos-anchor-placement="top-center"
                             className='relative h-full'>
-                            <div className='float-right -mr-72 h-full mt-40'>
+                            <div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
                                 <div className='sticky top-24'>
                                     <Catalog toc={post.toc} />
                                 </div>
diff --git a/themes/matery/components/Catalog.js b/themes/matery/components/Catalog.js
index 3104e338..c5a3e3db 100644
--- a/themes/matery/components/Catalog.js
+++ b/themes/matery/components/Catalog.js
@@ -58,7 +58,7 @@ const Catalog = ({ toc }) => {
     return <></>
   }
 
-  return <div className='px-3 w-72'>
+  return <div className='px-3 '>
     <div className='dark:text-white'><i className='mr-1 fas fa-stream' /> 目录</div>
     <div className='w-full py-3'>
       <Progress />
@@ -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={`${activeSection === id && ' font-bold text-green-500 underline overflow-ellipsis truncate'}`}
               >
                 {tocItem.text}
               </span>