diff --git a/src/main.js b/src/main.js
index 6c63e416bd6c9..7e89b25ab5a7e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -162,6 +162,7 @@ window.addEventListener('DOMContentLoaded', async() => {
       body.append(renderAPIReference(api));
       body.scrollTop = 0;
       documentationView.focus();
+      documentationView.$('.view-body-toc').textContent = '';
       return;
     }
 
@@ -180,10 +181,10 @@ window.addEventListener('DOMContentLoaded', async() => {
       searchView.inputElement().value = '';
     }
 
-    if (toShow.glossaryItems() && toShow.glossaryItems().length) {
-      const firstItem = toShow.glossaryItems()[0];
-      // Build summary of headings (table of contents) with first item
-      const summaryItems = firstItem.childItems();
+    // Generate summary element with table-of-contents (right sidebar)
+    if (glossaryItem) {
+      const item = glossaryItem.parentItem() || glossaryItem;
+      const summaryItems = item.childItems();
       const tocElement = html`<ul>${summaryItems.map(item => html`<li><a href="${item.url()}">${item.name()}</a></li>`)}</ul>`;
       documentationView.$('.view-body-toc').textContent = '';
       documentationView.$('.view-body-toc').append(tocElement);
diff --git a/src/style.css b/src/style.css
index 372a43d5b6e09..babb1bf02beb3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -140,6 +140,9 @@ external-link-icon {
   padding-left: 20px;
   margin-top: 40px;
   border-left: 1px solid var(--border-color);
+  overflow: auto;
+  /* 40px for margin-top subtracted */ 
+  height: calc(100vh - 40px);
 }
 
 .view-body-toc ul a {