ContentSidebar now uses grid; adjusted sizing

src/lib/components/table-of-contents.svelte

@@ -71,6 +71,8 @@
 
 {#if tocEntries.length > 0}
     <div class="{type ? "toc-container-side" : "toc-container"} blurred-background">
+        <p class="toc-header">on this page</p>
+
         <ul class="toc-list">
             {#each tocEntries as entry}
                 {@render tocEntryLine({ entry })}
@@ -100,11 +102,12 @@
         }
 
         .toc-container-side {
-            --padding-indent-base: 24px;
+            --padding-indent-base: 20px;
-            --padding-level-indent: 24px;
+            --padding-level-indent: var(--padding-indent-base);
 
-            width: 400px;
+            /* width: 300px; */
-            margin: 32px 12px 0 12px;
+            margin-left: 12px;
+            margin-right: 12px;
             position: sticky;
             top: 64px;
             border-left: var(--border-style) var(--border-dash-size) var(--color-highlight);
@@ -120,6 +123,14 @@
             margin: 0;
             width: 100%;
         }
+
+        .toc-header {
+            margin: 0 var(--padding-indent-base);
+            font-weight: 700;
+            font-style: italic;
+            color: var(--color-highlight);
+            font-family: var(--font-mono);
+        }
         
         .toc-list a {
             width: 100%;

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;
+        max-width: var(--page-width);
-        flex-direction: row;
+        width: 100%;
+        display: grid;
+        grid-template-columns: auto 300px;
+    }
+
+    .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>