update

pages/novel/[slug]/index.tsx

@@ -211,7 +211,7 @@ const Novel: NextPage<NovelPageProps> = (props) => {
     return null;
   }
   return (
-    <main className="w-full">
+    <main>
       <SeoHead seoConfig={seoConfig} />
       <div
         className={styles["novel-wrap"]}
@@ -219,7 +219,7 @@ const Novel: NextPage<NovelPageProps> = (props) => {
           backgroundImage: `url(${detail?.img})`,
         }}
       >
-        <div className={styles["novel-container"]}>
+        <div className={clsx("container", styles["novel-container"])}>
           <div className="text-sm py-4 breadcrumbs">
             <ul>
               <li>
@@ -325,7 +325,7 @@ const Novel: NextPage<NovelPageProps> = (props) => {
       </div>
       <Tabs
         defaultValue={0}
-        className={clsx(styles["novel-page"], "bg-paper", "py-3")}
+        className={clsx("container", styles["novel-page"], "bg-paper", "py-3")}
       >
         <TabsList className={clsx("tabs", styles["novel-tabs"])}>
           <Tab value={0} className="tab">
@@ -359,7 +359,13 @@ const Novel: NextPage<NovelPageProps> = (props) => {
         <TabPanel value={1}>
           <h3 className="sub-title">{detail.name} Chapters</h3>
           <Tabs defaultValue={0}>
-            <TabsList className={clsx("tabs", styles["novel-tabs"], styles["chapter-tabs"])}>
+            <TabsList
+              className={clsx(
+                "tabs",
+                styles["novel-tabs"],
+                styles["chapter-tabs"]
+              )}
+            >
               {chapterLists.map((chapter, idx) => (
                 <Tab value={idx} className="tab" key={chapter.title}>
                   {chapter.title}

styles/chapter.module.scss

@@ -45,7 +45,7 @@
 .toolbar {
   color-scheme: dark;
 
-  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-30 text-gray-400 shadow-lg shadow-white; // hidden;
+  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-40 text-gray-400 shadow-lg shadow-white; // hidden;
   @apply lg:bg-gray-800 lg:right-0 lg:w-auto lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center lg:shadow-none;
   .toolbar-items {
     @apply flex lg:flex-col lg:w-full;
@@ -63,7 +63,7 @@
 .toolbar-display {
   color-scheme: dark;
 
-  @apply fixed bottom-0 left-0 w-full bg-gray-900 text-gray-100 z-30 pt-4 pb-24 px-5 shadow-xl shadow-white/10;
+  @apply fixed bottom-0 left-0 w-full bg-gray-900 text-gray-100 z-40 pt-4 pb-24 px-5 shadow-xl shadow-white/10;
   @apply lg:w-96 lg:max-h-[calc(100vh-65px)] lg:sticky lg:top-[65px] lg:pb-4 lg:px-0;
   .toolbar-display-title {
     @apply flex text-base mb-2 pb-2 items-center justify-between border-b border-b-gray-700;

styles/novel-info.module.scss

@@ -9,7 +9,7 @@
   }
 }
 .novel-container {
-  @apply container relative px-4 mx-auto;
+  @apply relative px-4 mx-auto;
 }
 .novel-info {
   @apply flex pb-5;
@@ -104,7 +104,7 @@
   }
 }
 .novel-page {
-  @apply container overflow-visible;
+  @apply overflow-visible;
 }
 .novel-tabs {
   @apply mb-5 sticky top-[57px] backdrop-blur bg-white/60 -mx-4 px-4 scroll-px-4 lg:top-[65px] lg:mx-0 lg:px-0 lg:scroll-px-0;