fix(toc): display scroll bar only if the content is overflowing (#1185)

Den-dp · web-flow · commit 653c3cb3c041 · 2024-07-08T07:28:29.000-07:00
The `table-of-content` component shows a scrollbar on Windows even if the content fits: ![image](https://github.com/npm/documentation/assets/1770529/7bfcb577-0563-40a5-98f4-d4b68d3d2b45) This fix enables `auto` mode to display scroll bar only if the content is overflowing: ![image](https://github.com/npm/documentation/assets/1770529/81e6743b-e1cc-4013-a0e7-069233777c11) ![image](https://github.com/npm/documentation/assets/1770529/d327d725-e4eb-4472-9d1b-a3a311cbf260)
diff --git a/src/components/table-of-contents.js b/src/components/table-of-contents.js
@@ -83,7 +83,7 @@ export const Desktop = withTableOfContents(({items}) => (
       sx={{
         // extra pixels to account for table of contents title height
         maxHeight: `calc(100% - 24px)`,
-        overflowY: 'scroll',
+        overflowY: 'auto',
       }}
     >
       <TableOfContents aria-labelledby="toc-heading" items={items} sx={{ml: -2}} />

Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,7 @@ export const Desktop = withTableOfContents(({items}) => (`
`83`	`83`	`sx={{`
`84`	`84`	`// extra pixels to account for table of contents title height`
`85`	`85`	maxHeight: `calc(100% - 24px)`,
`86`		`- overflowY: 'scroll',`
	`86`	`+ overflowY: 'auto',`
`87`	`87`	`}}`
`88`	`88`	`>`
`89`	`89`	`<TableOfContents aria-labelledby="toc-heading" items={items} sx={{ml: -2}} />`