responsive doc TOC

gui/app/styles/app.scss

@@ -32,10 +32,10 @@
 @import "section/wysiwyg.scss";
 
 // Bootstrap override that removes gutter space on smaller screens
-@media (max-width: 1200px) {
-    .container {
-        width: 100%;
-        max-width: none;
-    }
-}
+// @media (max-width: 1200px) {
+//     .container {
+//         width: 100%;
+//         max-width: none;
+//     }
+// }
 

gui/app/styles/view/document/doc-meta.scss

@@ -1,7 +1,5 @@
 .view-document {
 	> .document-heading {
-		margin-top: 3rem;
-
 		.doc-title {
 			margin: 50px 0 10px;
 			font-size: 2rem;
@@ -16,7 +14,7 @@
 	}
 
 	> .document-heading-edit {
-		margin-top: 5.5rem;
+		margin-top: 3.5rem;
 		margin-bottom: 3rem;
 	}
 

gui/app/styles/view/document/doc-toc.scss

@@ -1,11 +1,14 @@
 .document-toc {
     @include border-radius(3px);
-	margin: 30px 0 30px 0;
+    @include ease-in();
+    margin: 0;
     padding: 0 20px 20px 20px;
     background-color: $color-off-white;
     border: 1px solid $color-border;
     overflow: scroll;
-
+    box-sizing: border-box; // ensures width/height properties (and min/max properties) includes content, padding and border
+    z-index: 777;
+    
     > .header {
         @include sticky();
         flex-direction: column;
@@ -36,7 +39,6 @@
         }
     }
 
-
     > .index-list {
         padding: 0;
         list-style: none;
@@ -77,12 +79,20 @@
 }
 
 .document-toc-desktop {
+	margin: 30px 0 30px 0;
     display: inline-block;
     position: fixed;
+    top: 100px;
     right: 30px;
-    z-index: 777;    
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px);
 }
 
 .document-toc-small {
-    display: block;
+    display: inline-block;
+    position: relative !important;
+    margin: 0;
+    width: 100% !important;
+    height: 500px;
+    transform: none !important;
 }