fix toc

Author: Lukas742

.storybook/components/TableOfContent.tsx

@@ -1,14 +1,32 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import * as tocbot from 'tocbot';
 import classes from './ToC.module.css';
 
 export function TableOfContent({
   headingSelector = 'h2:not(.noAnchor), h3:not(.noAnchor), h4:not(.noAnchor)',
   onlyDisplaySideNav = false,
+  tocOverflowHeight = 1080,
 }: {
   headingSelector?: string;
   onlyDisplaySideNav?: boolean;
+  tocOverflowHeight?: number;
 }) {
+  const refCallback = useCallback(
+    (node: HTMLDivElement) => {
+      if (node) {
+        if (
+          window.matchMedia('(min-width:1330px)').matches &&
+          window.matchMedia(`(min-height:${tocOverflowHeight}px)`).matches
+        ) {
+          node.style.overflowY = 'hidden';
+        } else {
+          node.style.overflowY = undefined;
+        }
+      }
+    },
+    [tocOverflowHeight],
+  );
+
   useEffect(() => {
     tocbot.init({
       tocSelector: '.js-toc',
@@ -25,13 +43,12 @@ export function TableOfContent({
       tocbot.destroy();
     };
   }, [headingSelector]);
-
   return (
     <>
       <h3 className={`${classes.header} noAnchor`} data-show-small={!onlyDisplaySideNav}>
         Contents
       </h3>
-      <div className={classes.fixedContainer} data-show-small={!onlyDisplaySideNav}>
+      <div ref={refCallback} className={classes.fixedContainer} data-show-small={!onlyDisplaySideNav}>
         <div className={`js-toc ${classes.toc}`} id="toc-container" />
       </div>
     </>

.storybook/components/ToC.module.css

@@ -21,7 +21,6 @@
 .toc :global(.toc-link) {
   font-family: var(--sapFontFamily) !important;
   font-size: var(--sapFontSize) !important;
-  -webkit-font-smoothing: auto;
   line-height: normal;
 }
 
@@ -75,13 +74,14 @@
   .fixedContainer {
     width: 200px;
     position: fixed;
-    top: 75px;
+    top: 38px;
     right: 6px;
     overflow-x: hidden;
     overflow-y: auto;
   }
 
   .toc :global(.toc-list) {
+    margin-block-start: 0;
     padding-inline-start: 1rem;
   }
 
@@ -93,13 +93,13 @@
     width: 4px;
   }
 
-  .toc :global(.toc-list-item) {
-    /*overflow: hidden;*/
-    /*text-overflow: ellipsis;*/
-    /*white-space: nowrap;*/
-  }
-
   .toc :global(.is-active-link)::before {
     background-color: #0a6ed1;
   }
 }
+
+@media (min-width: 1650px) {
+  .fixedContainer {
+    width: 250px;
+  }
+}

.storybook/preview-head.html

@@ -39,8 +39,13 @@
     margin-bottom: 0;
   }
 
+  @media (min-width: 1330px) {
+    .sbdocs-content {
+      padding-inline-end: 200px;
+    }
+  }
   .sbdocs-content {
-    max-width: 1100px !important;
+    max-width: 1300px !important;
   }
 
   .responsiveGridLayoutItem {

docs/MigrationGuide.mdx

@@ -15,7 +15,7 @@ or the [changelog](?path=/docs/change-log--page)._
 > This migration guide only covers breaking changes when updating from v1 to v2.
 > For migration guides for older releases, please refer to our [Migration Guide Archive](https://github.com/SAP/ui5-webcomponents-react/blob/main/docs/MigrationGuide.archive.md).
 
-<TableOfContent headingSelector="h2, h3" />
+<TableOfContent headingSelector="h2, h3" tocOverflowHeight={1250} />
 
 ## UI5 Web Components Migration Guide