improved responsiveness of ContentSidebar and TableOfContents when resizing window

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);

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>