From 9b35cc2bae56e9c2820feca3af87640f3b75f999 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Mon, 6 Oct 2025 09:26:32 +0800
Subject: [PATCH] fix(toc): too wide when no related contents

---
 assets/css/compiled/main.css | 11 ++++++-----
 assets/css/main.css          |  4 ----
 layouts/_default/single.html |  8 ++------
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index b9742624..40e16531 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -245,6 +245,7 @@ body.zen-mode-enable {
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --spacing: 0.25rem;
+    --container-2xs: 18rem;
     --container-xs: 20rem;
     --container-xl: 36rem;
     --container-3xl: 48rem;
@@ -3120,6 +3121,11 @@ body.zen-mode-enable {
       width: auto;
     }
   }
+  .lg\:max-w-2xs {
+    @media (width >= 1024px) {
+      max-width: var(--container-2xs);
+    }
+  }
   .lg\:max-w-7xl {
     @media (width >= 1024px) {
       max-width: var(--container-7xl);
@@ -3638,11 +3644,6 @@ button, [role="button"] {
 .prose div.min-w-0.max-w-prose > *:first-child {
   margin-top: calc(var(--spacing) * 3);
 }
-#TableOfContents {
-  @media (width >= 1024px) {
-    max-width: 25vw;
-  }
-}
 #TOCView {
   max-height: calc(100vh - 150px);
   min-height: 0;
diff --git a/assets/css/main.css b/assets/css/main.css
index dfda1499..4c13445f 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -66,10 +66,6 @@ button,
 }
 
 /* Table of Contents */
-#TableOfContents {
-  @apply lg:max-w-[25vw];
-}
-
 #TOCView {
   max-height: calc(100vh - 150px);
   min-height: 0;
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7a879316..ad74da4e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -33,17 +33,13 @@
     <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
       {{ $enableToc := .Params.showTableOfContents | default (site.Params.list.showTableOfContents | default false) }}
       {{ $showToc := and $enableToc (in .TableOfContents "<ul") }}
-      {{ $showRelated := site.Params.article.showRelatedPosts | default false }}
       {{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }}
-      {{ if or $showToc $showRelated }}
-        <div class="order-first lg:ml-auto px-0 lg:order-last lg:ps-8">
+      {{ if $showToc }}
+        <div class="order-first lg:ml-auto px-0 lg:order-last lg:ps-8 lg:max-w-2xs">
           <div class="toc ps-5 print:hidden lg:sticky {{ $topClass }}">
             {{ if $showToc }}
               {{ partial "toc.html" . }}
             {{ end }}
-            {{ if $showRelated }}
-              sd
-            {{ end }}
           </div>
         </div>
       {{ end }}