Fix TOC layout

Author: st0012

lib/rdoc/generator/template/aliki/css/rdoc.css

@@ -162,7 +162,11 @@
 
   /* Layout Dimensions */
   --layout-sidebar-width: 280px;
-  --layout-toc-width: 240px;
+  --layout-sidebar-width-min: 240px;
+  --layout-sidebar-width-max: 15%;
+  --layout-toc-width: 280px;
+  --layout-toc-width-min: 240px;
+  --layout-toc-width-max: 18%;
   --layout-content-max-width: 800px;
   --layout-header-height: 64px;
   --layout-search-width: 400px;
@@ -281,7 +285,7 @@ body {
 
   /* Grid layout with header, sidebar, main, and footer */
   display: grid;
-  grid-template-columns: var(--layout-sidebar-width) 1fr;
+  grid-template-columns: minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr;
   grid-template-rows: var(--layout-header-height) 1fr auto;
   grid-template-areas:
     "header header"
@@ -292,7 +296,7 @@ body {
 
 /* Three-column layout when TOC is present */
 body.has-toc {
-  grid-template-columns: var(--layout-sidebar-width) 1fr var(--layout-toc-width);
+  grid-template-columns: minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr minmax(var(--layout-toc-width-min), var(--layout-toc-width-max));
   grid-template-areas:
     "header header header"
     "nav main toc"
@@ -1257,16 +1261,18 @@ main header h3 {
 /* 10. Right Sidebar - Table of Contents */
 aside.table-of-contents {
   grid-area: toc;
-  position: fixed;
-  right: 0;
+  align-self: start;
+  position: sticky;
   top: var(--layout-header-height);
-  width: var(--layout-toc-width);
-  height: calc(100vh - var(--layout-header-height));
-  overflow: visible;
   padding: var(--space-8) var(--space-6);
+  border: none;
   border-left: 1px solid var(--border-color);
   font-size: var(--font-size-base);
-  z-index: var(--z-sticky);
+}
+
+aside.table-of-contents * {
+  border-right: none !important;
+  outline: none !important;
 }
 
 /* Hide TOC on mobile/tablet */
@@ -1276,7 +1282,7 @@ aside.table-of-contents {
   }
 
   body.has-toc {
-    grid-template-columns: var(--layout-sidebar-width) 1fr;
+    grid-template-columns: minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr;
     grid-template-areas:
       "header header"
       "nav main"
@@ -1330,6 +1336,9 @@ aside.table-of-contents {
   text-decoration: none;
   transition: color var(--transition-fast);
   line-height: var(--line-height-relaxed);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 
 .table-of-contents a:hover {