style: make on-this-page sticky

addon/styles/on-this-page.css

@@ -1,5 +1,10 @@
 .on-this-page-wrapper {
   font-size: var(--font-size-sm);
+  max-height: calc(100vh - var(--spacing-4));
+  overflow-y: auto;
+  position: sticky;
+  top: var(--spacing-4);
+  scrollbar-width: thin;
 }
 
 .on-this-page-wrapper ul {

tests/acceptance/chapter-links-test.js

@@ -3,10 +3,10 @@ import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { visit, find } from '@ember/test-helpers';
 
-module('Acceptance | chapter-links', function(hooks) {
+module('Acceptance | chapter-links', function (hooks) {
   setupApplicationTest(hooks);
 
-  test('chapter links are correct', async function(assert) {
+  test('chapter links are correct', async function (assert) {
     await visit('/release');
 
     let prevLinkTexts = [];
@@ -29,23 +29,37 @@ module('Acceptance | chapter-links', function(hooks) {
 
     assert.deepEqual(
       prevLinkTexts,
-      [null, 'Guides', 'Introduction', 'Editing', 'Introduction', 'Page 1', 'Introduction', 'Page 2', 'Page 3','Basic Markdown','Code Syntax Highlighting'],
+      [
+        null,
+        'Guides',
+        'Introduction',
+        'Editing',
+        'Introduction',
+        'Page 1',
+        'Introduction',
+        'Page 2',
+        'Page 3',
+        'Basic Markdown',
+        'Code Syntax Highlighting',
+        'Callouts',
+      ],
       'previous link texts were correct'
     );
 
     assert.deepEqual(
       nextLinkTexts,
       [
         "We've finished covering Guides and Tutorials. Next up: Getting Started - Introduction",
-        "Editing",
+        'Editing',
         "We've finished covering Getting Started. Next up: Another Section - Introduction",
-        "Page 1",
-        "Subsection - Introduction",
-        "Page 2",
+        'Page 1',
+        'Subsection - Introduction',
+        'Page 2',
         "We've finished covering Subsection. Next up: Another Section - Page 3",
         "We've finished covering Another Section. Next up: Examples - Basic Markdown",
-        "Code Syntax Highlighting",
-        "Callouts",
+        'Code Syntax Highlighting',
+        'Callouts',
+        "We've finished covering Examples. Next up: Guide test - Sidebar stress test",
         null,
       ],
       'next link texts were correct'

tests/dummy/guides/release/guide-test/index.md

@@ -0,0 +1,103 @@
+Below is just some dummy content to have more table of contents items available on the current page.
+
+## Example Section 1
+
+Lorem ipsum
+
+### Example Subsection 1 a
+
+Lorem ipsum
+
+#### Example subsubsection 1 a I
+
+#### Example subsubsection 1 a II
+
+#### Example subsubsection 1 a III
+
+### Example Subsection 1 b
+
+Lorem ipsum
+
+#### Example subsubsection 1 b I
+
+#### Example subsubsection 1 b II
+
+#### Example subsubsection 1 b III
+
+### Example Subsection 1 c
+
+Lorem ipsum
+
+#### Example subsubsection 1 c I
+
+#### Example subsubsection 1 c II
+
+#### Example subsubsection 1 c III
+
+## Example Section 2
+
+Lorem ipsum
+
+### Example Subsection 2 a
+
+Lorem ipsum
+
+#### Example subsubsection 2 a I
+
+#### Example subsubsection 2 a II
+
+#### Example subsubsection 2 a III
+
+### Example Subsection 2 b
+
+Lorem ipsum
+
+#### Example subsubsection 2 b I
+
+#### Example subsubsection 2 b II
+
+#### Example subsubsection 2 b III
+
+### Example Subsection 2 c
+
+Lorem ipsum
+
+#### Example subsubsection 2 c I
+
+#### Example subsubsection 2 c II
+
+#### Example subsubsection 2 c III
+
+## Example Section 3
+
+Lorem ipsum
+
+### Example Subsection 3 a
+
+Lorem ipsum
+
+#### Example subsubsection 3 a I
+
+#### Example subsubsection 3 a II
+
+#### Example subsubsection 3 a III
+
+### Example Subsection 3 b
+
+Lorem ipsum
+
+#### Example subsubsection 3 b I
+
+#### Example subsubsection 3 b II
+
+#### Example subsubsection 3 b III
+
+### Example Subsection 3 c
+
+Lorem ipsum
+
+#### Example subsubsection 3 c I
+
+#### Example subsubsection 3 c II
+
+#### Example subsubsection 3 c III

tests/dummy/guides/release/pages.yml

@@ -47,3 +47,9 @@
       url: "syntax-highlighting"
     - title: "Callouts"
       url: 'callouts'
+
+- title: "Guide test"
+  url: 'guide-test'
+  pages:
+    - title: "Sidebar stress test"
+      url: "index"