fix(#1999): fix scroll bar positioning on Windows and updateToc

Author: majornista

packages/dev/docs/src/attachToToC.js

@@ -13,6 +13,7 @@
 import sideNavStyles from '@adobe/spectrum-css-temp/components/sidenav/vars.css';
 
 export function attachToToC() {
+  let main = document.getElementsByTagName('main')[0];
   let tocLinks = document.querySelectorAll('#toc a');
   let headers = [];
   for (let link of tocLinks) {
@@ -26,7 +27,7 @@ export function attachToToC() {
       // this needs to be improved a little but the math hurts my head right now
       // right now it's impossible to select the last section if the last two heights combined are smaller than the viewport height
       headers.some((header, i) => {
-        if ((header.header.offsetTop + header.header.getBoundingClientRect().height) > document.documentElement.scrollTop) {
+        if ((header.header.offsetTop + header.header.getBoundingClientRect().height) > main.scrollTop + main.offsetTop) {
           let currentSelection = document.querySelectorAll(`#toc .${sideNavStyles['is-selected']}`);
           if (currentSelection) {
             currentSelection.forEach(node => {
@@ -47,5 +48,5 @@ export function attachToToC() {
 
   updateToc();
 
-  document.addEventListener('scroll', updateToc);
+  main.addEventListener('scroll', updateToc);
 }

packages/dev/docs/src/docs.css

@@ -295,8 +295,7 @@ html, body {
 main {
   margin-top: var(--spectrum-global-dimension-size-550);
   margin-left: 256px;
-  margin-right: 180px;
-  padding: 0 52px;
+  padding: 0 244px 0 52px;
   box-sizing: border-box;
   display: flex;
   height: calc(100vh - var(--spectrum-global-dimension-size-550));
@@ -738,13 +737,6 @@ h2.sectionHeader {
   }
 }
 
-@media (max-width: 1200px) {
-  /* Hide the table of contents */
-  main {
-    margin-right: 0;
-  }
-}
-
 @define-mixin small-propTable {
   /* Collapse the prop table into a list with key/value pairs */
   .propTable {

packages/dev/docs/src/toc.css

@@ -13,7 +13,7 @@
 .toc {
   position: fixed;
   top: 80px;
-  right: 8px;
+  right: 20px;
   overflow-y: auto;
   max-height: calc(100vh - 80px);
 }