From 9e29545114a5f0efae3207318196e14266538ca9 Mon Sep 17 00:00:00 2001
From: Gabriel Dugny <gabriel.dugny@believe.com>
Date: Wed, 21 Jan 2026 11:15:05 +0100
Subject: [PATCH] fix(techdocs): Improve sidebar position, scroll (#31483)

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>
---
 .changeset/slimy-dots-sing.md                 |  5 +++
 .../transformers/styles/rules/layout.ts       | 31 +++----------------
 2 files changed, 9 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/slimy-dots-sing.md

diff --git a/.changeset/slimy-dots-sing.md b/.changeset/slimy-dots-sing.md
new file mode 100644
index 0000000000..a7f3a8a07b
--- /dev/null
+++ b/.changeset/slimy-dots-sing.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Improve sidebars (nav/TOC) layout and scrolling
diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
index b99fb0b020..6488f3248f 100644
--- a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
+++ b/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;
   }
 }