From 2a2dc3fa1910a2ea3009e646e1f1c842b00bb5f2 Mon Sep 17 00:00:00 2001
From: the3ash <24548223+the3ash@users.noreply.github.com>
Date: Fri, 11 Jul 2025 13:52:42 +0800
Subject: [PATCH] style: increase toc item width

---
 src/components/ui/BackButton.astro      | 17 ++++++++---
 src/components/ui/TableOfContents.astro | 39 +++++++++++++++----------
 src/config.ts                           |  2 +-
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/components/ui/BackButton.astro b/src/components/ui/BackButton.astro
index d126f18..38807d7 100644
--- a/src/components/ui/BackButton.astro
+++ b/src/components/ui/BackButton.astro
@@ -16,7 +16,11 @@ import { SITE } from '@/config'
 
 <script
   is:inline
-  define:vars={{ contentWidth: SITE.contentWidth, centeredLayout: SITE.centeredLayout }}
+  define:vars={{
+    contentWidth: SITE.contentWidth,
+    centeredLayout: SITE.centeredLayout,
+    toc: SITE.toc
+  }}
 >
   ;(function () {
     // Adjust back button position based on layout and screen size
@@ -35,12 +39,17 @@ import { SITE } from '@/config'
       const pageWidth = window.innerWidth
       const contentWidthValue = parseFloat(contentWidth)
       const margin = (pageWidth - contentWidthValue * 16) / 2
-      const minSpace = 11 * 16 // Minimum space needed
+      const baseMinSpace = 11 * 16 // Base minimum space needed
+      // If toc is enabled, need additional 2.5rem (40px) space
+      const minSpace = toc ? baseMinSpace + 40 : baseMinSpace
 
       // Position button fixed on the left if there's enough space
       if (margin >= minSpace) {
         button.classList.add('fixed-position')
-        button.style.left = `${margin - minSpace}px`
+        const basePosition = margin - baseMinSpace
+        // If toc is enabled, move 2.5rem (40px) further left
+        const leftPosition = toc ? basePosition - 40 : basePosition
+        button.style.left = `${leftPosition}px`
       } else {
         button.classList.remove('fixed-position')
         button.style.left = ''
@@ -61,7 +70,7 @@ import { SITE } from '@/config'
 
 <style>
   .back-button {
-    width: 128px;
+    width: 8rem;
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
diff --git a/src/components/ui/TableOfContents.astro b/src/components/ui/TableOfContents.astro
index cc6f509..4da421d 100644
--- a/src/components/ui/TableOfContents.astro
+++ b/src/components/ui/TableOfContents.astro
@@ -10,17 +10,21 @@ import { SITE } from '@/config'
 
 <script
   is:inline
-  define:vars={{ contentWidth: SITE.contentWidth, centeredLayout: SITE.centeredLayout }}
+  define:vars={{
+    contentWidth: SITE.contentWidth,
+    centeredLayout: SITE.centeredLayout,
+    toc: SITE.toc
+  }}
 >
   ;(function () {
     // TOC positioning logic (similar to BackButton)
     function adjustTOCPosition() {
-      const toc = document.querySelector('.toc-container')
-      if (!toc) return
+      const tocContainer = document.querySelector('.toc-container')
+      if (!tocContainer) return
 
       // If not using centered layout, hide TOC
       if (!centeredLayout) {
-        toc.style.display = 'none'
+        tocContainer.style.display = 'none'
         return
       }
 
@@ -28,17 +32,22 @@ import { SITE } from '@/config'
       const pageWidth = window.innerWidth
       const contentWidthValue = parseFloat(contentWidth)
       const margin = (pageWidth - contentWidthValue * 16) / 2
-      const minSpace = 11 * 16 // Minimum space needed
+      const baseMinSpace = 11 * 16 // Base minimum space needed
+      // If toc is enabled, need additional 2.5rem (40px) space
+      const minSpace = toc ? baseMinSpace + 40 : baseMinSpace
 
       // Show and position TOC fixed on the left if there's enough space
       if (margin >= minSpace) {
-        toc.style.display = 'block'
-        toc.classList.add('fixed-position')
-        toc.style.left = `${margin - minSpace}px`
+        tocContainer.style.display = 'block'
+        tocContainer.classList.add('fixed-position')
+        const basePosition = margin - baseMinSpace
+        // If toc is enabled, move 2.5rem (40px) further left
+        const leftPosition = toc ? basePosition - 40 : basePosition
+        tocContainer.style.left = `${leftPosition}px`
       } else {
-        toc.style.display = 'none'
-        toc.classList.remove('fixed-position')
-        toc.style.left = ''
+        tocContainer.style.display = 'none'
+        tocContainer.classList.remove('fixed-position')
+        tocContainer.style.left = ''
       }
     }
 
@@ -75,9 +84,9 @@ import { SITE } from '@/config'
       })
 
       // Hide TOC if there are no headings (only title)
-      const tocContainer = document.querySelector('.toc-container')
-      if (tocContainer && tocItems.length === 0) {
-        tocContainer.style.display = 'none'
+      const tocContainerElement = document.querySelector('.toc-container')
+      if (tocContainerElement && tocItems.length === 0) {
+        tocContainerElement.style.display = 'none'
         return
       }
 
@@ -192,7 +201,7 @@ import { SITE } from '@/config'
 
 <style is:global>
   .toc-container {
-    width: 128px;
+    width: 12rem;
     position: relative;
     left: -0.175em;
   }
diff --git a/src/config.ts b/src/config.ts
index 616c310..15307b6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -21,7 +21,7 @@ export const SITE = {
 
   // POST SETTINGS ///////////////////////////////////////////////////////////////////////////////////////
   readingTime: false, // Show reading time in posts
-  toc: true, // Show table of contents
+  toc: true, // Show the table of contents when there is enough page width
   imageViewer: true, // Enable image viewer
   copyCode: false // Enable copy button in code blocks
 }
-- 
2.51.2