refactoring to use the new .markdownIt-TOC-wrapper div

browser/components/markdown.styl

@@ -447,9 +447,8 @@ pre.fence
         color $ui-text-color
         background-color $ui-tag-backgroundColor
 
-.markdownIt-TOC
+.markdownIt-TOC-wrapper
   list-style none
-  padding 15px
   position fixed
   right 0
   top 0
@@ -458,6 +457,13 @@ pre.fence
   transition transform .2s ease-in-out
   transform translateX(100%)
 
+  .markdownIt-TOC
+    display block
+    max-height 90vh
+    overflow-y auto
+    padding 25px
+    padding-left 38px
+
   &,
   &:before
     background-color $ui-dark-backgroundColor
@@ -472,7 +478,7 @@ pre.fence
     width 60px
     height 30px
     top 60px
-    left -30px
+    left -29px
     display flex
     align-items center
     justify-content center
@@ -546,7 +552,7 @@ body[data-theme="dark"]
         color $ui-dark-text-color
         background-color $ui-dark-tag-backgroundColor
 
-  .markdownIt-TOC
+  .markdownIt-TOC-wrapper
     &,
     &:before
       background-color darken(themeDarkBackground, 5%)
@@ -597,7 +603,7 @@ body[data-theme="solarized-dark"]
         color $ui-solarized-dark-button--active-color
         background-color $ui-solarized-dark-button-backgroundColor
 
-  .markdownIt-TOC
+  .markdownIt-TOC-wrapper
     &,
     &:before
       background-color darken(themeSolarizedDarkBackground, 15%)
@@ -650,7 +656,7 @@ body[data-theme="monokai"]
         color $ui-monokai-button--active-color
         background-color $ui-monokai-button-backgroundColor
 
-  .markdownIt-TOC
+  .markdownIt-TOC-wrapper
     &,
     &:before
       background-color darken(themeMonokaiBackground, 15%)
@@ -703,7 +709,7 @@ body[data-theme="dracula"]
         color $ui-dracula-button--active-color
         background-color $ui-dracula-button-backgroundColor
 
-  .markdownIt-TOC
+  .markdownIt-TOC-wrapper
     &,
     &:before
       background-color darken(themeDraculaBackground, 15%)