From 7b2e3563419f911b04d3ed6779c9196fc2cb5f7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20N=C3=A4sman?= <andersn@spotify.com>
Date: Thu, 3 Mar 2022 10:31:17 +0100
Subject: [PATCH 1/4] fix sidebar scrolling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Anders Näsman <andersn@spotify.com>
---
 plugins/techdocs/src/reader/components/Reader.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 6aa5c99be4..423e49a1e1 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -442,12 +442,14 @@ export const useTechDocsReaderDom = (
             }
 
             .md-sidebar {
-              height: calc(100% - 100px);
+              bottom: 75px;
               position: fixed;
               width: 16rem;
+              overflow-y: auto;
+              overflow-x: hidden;
             }
             .md-sidebar .md-sidebar__scrollwrap {
-              max-height: calc(100% - 100px);
+              width: calc(16rem - 16px);
             }
             .md-sidebar--secondary {
               right: ${theme.spacing(3)}px;
@@ -474,6 +476,12 @@ export const useTechDocsReaderDom = (
               background-color: unset;
             }
 
+            @media screen and (min-width: 76.25em) {
+              .md-sidebar {
+                height: auto;
+              }
+            }
+            
             @media screen and (max-width: 76.1875em) {
               .md-nav {
                 transition: none !important;

From d84e78c667e44acd7468d722dacffde2f3df3b21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20N=C3=A4sman?= <andersn@spotify.com>
Date: Thu, 3 Mar 2022 11:38:10 +0100
Subject: [PATCH 2/4] add scroll styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Anders Näsman <andersn@spotify.com>
---
 .../techdocs/src/reader/components/Reader.tsx | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 423e49a1e1..9ce9ad5d6d 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -447,13 +447,37 @@ export const useTechDocsReaderDom = (
               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 - 16px);
+              width: calc(16rem - 10px);
             }
             .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);

From 06af9e8d17be3ad7ef22a0184d7890045b248cc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20N=C3=A4sman?= <andersn@spotify.com>
Date: Thu, 3 Mar 2022 13:02:54 +0100
Subject: [PATCH 3/4] changeset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Anders Näsman <andersn@spotify.com>
---
 .changeset/techdocs-slow-teachers-sleep.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/techdocs-slow-teachers-sleep.md

diff --git a/.changeset/techdocs-slow-teachers-sleep.md b/.changeset/techdocs-slow-teachers-sleep.md
new file mode 100644
index 0000000000..5e50d92d2b
--- /dev/null
+++ b/.changeset/techdocs-slow-teachers-sleep.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Long sidebars will no longer overflow the footer and will properly show a scrollbar when needed.

From 07c1ca87bb9753c009bcdd8c6b18022fa8731d34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20N=C3=A4sman?= <andersn@spotify.com>
Date: Thu, 3 Mar 2022 13:13:00 +0100
Subject: [PATCH 4/4] add scrollbar to vocab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Anders Näsman <andersn@spotify.com>
---
 .github/styles/vocab.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt
index c7971f6c52..4897aa3171 100644
--- a/.github/styles/vocab.txt
+++ b/.github/styles/vocab.txt
@@ -257,6 +257,7 @@ sanitization
 scaffolded
 scaffolder
 Scaffolder
+scrollbar
 seb
 semlas
 semver