From cf125809bd8a574b8cc58568d5494695a6107b22 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 27 Apr 2026 14:49:48 +0200
Subject: [PATCH] improved responsiveness of ContentSidebar and TableOfContents
 when resizing window

---
 src/lib/components/table-of-contents.svelte |  9 ++++----
 src/lib/viewport/content-sidebar.svelte     | 23 ++++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/table-of-contents.svelte b/src/lib/components/table-of-contents.svelte
index b8fa8f6..2539c0e 100644
--- a/src/lib/components/table-of-contents.svelte
+++ b/src/lib/components/table-of-contents.svelte
@@ -100,11 +100,12 @@
         }
 
         .toc-container-side {
-            --padding-indent-base: 24px;
-            --padding-level-indent: 24px;
+            --padding-indent-base: 20px;
+            --padding-level-indent: var(--padding-indent-base);
 
-            width: 400px;
-            margin: 32px 12px 0 12px;
+            /* width: 300px; */
+            margin-left: 12px;
+            margin-right: 12px;
             position: sticky;
             top: 64px;
             border-left: var(--border-style) var(--border-dash-size) var(--color-highlight);
diff --git a/src/lib/viewport/content-sidebar.svelte b/src/lib/viewport/content-sidebar.svelte
index 570b125..8e8c378 100644
--- a/src/lib/viewport/content-sidebar.svelte
+++ b/src/lib/viewport/content-sidebar.svelte
@@ -36,30 +36,43 @@
         }
     }
     .container {
-        width: var(--page-width);
+        max-width: var(--page-width);
         margin: 0 auto;
         padding: 0 24px;
         box-sizing: border-box;
     }
 
     .content {
-        display: flex;
-        flex-direction: row;
+        max-width: var(--page-width);
+        width: 100%;
+        display: grid;
+        grid-template-columns: auto minmax(300px, 24vw);
+    }
+
+    .content-sidebar-main-container {
+        width: 100%;
     }
 
     .side {
-        width: fit-content;
+        width: 100%;
+        margin-top: 32px;
+        margin-bottom: 8px;
     }
 
     @media screen and (max-width: 800px) {
         .content {
             padding: 0 8px;
-            flex-direction: column;
+            width: 100%;
+            grid-template-rows: auto auto;
+            grid-template-columns: 1fr;
         }
 
         .side {
             min-width: 0;
+            max-width: 100%;
+            margin-top: 8px;
             width: 100%;
+            order: -1;
         }
     }
 </style>
\ No newline at end of file