fix(techdocs): Improve sidebar position, scroll (#31483)

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>

.changeset/slimy-dots-sing.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Improve sidebars (nav/TOC) layout and scrolling

plugins/techdocs/src/reader/transformers/styles/rules/layout.ts

@@ -81,15 +81,12 @@ export default ({ theme, sidebar }: RuleOptions) => `
   bottom: 75px;
   position: fixed;
   width: 16rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-color: rgb(193, 193, 193) #eee;
-  scrollbar-width: thin;
 }
 .md-sidebar .md-sidebar__scrollwrap {
   width: calc(16rem);
-  overflow-y: hidden;
+  height: 100%
 }
+
 @supports selector(::-webkit-scrollbar) {
   [dir=ltr] .md-sidebar__inner {
       padding-right: calc(100% - 15.1rem);
@@ -98,28 +95,6 @@ export default ({ theme, sidebar }: RuleOptions) => `
 .md-sidebar--secondary {
   right: ${theme.spacing(3)}px;
 }
-.md-sidebar::-webkit-scrollbar {
-  width: 5px;
-}
-.md-sidebar::-webkit-scrollbar-button {
-  width: 5px;
-  height: 5px;
-}
-.md-sidebar::-webkit-scrollbar-track {
-  background: #eee;
-  border: 1 px solid rgb(250, 250, 250);
-  box-shadow: 0px 0px 3px #dfdfdf inset;
-  border-radius: 3px;
-}
-.md-sidebar::-webkit-scrollbar-thumb {
-  width: 5px;
-  background: rgb(193, 193, 193);
-  border: transparent;
-  border-radius: 3px;
-}
-.md-sidebar::-webkit-scrollbar-thumb:hover {
-  background: rgb(125, 125, 125);
-}
 
 .md-content {
   max-width: calc(100% - 16rem * 2);
@@ -155,6 +130,8 @@ export default ({ theme, sidebar }: RuleOptions) => `
 @media screen and (min-width: 76.25em) {
   .md-sidebar {
     height: auto;
+    /* Less padding before the Previous / Next buttons */
+    padding-bottom: 0 !important;
   }
 }