Merge pull request #2606 from dotty-staging/topic/fix-content-overflow

Fix overflow of sidebar in html templates

Author: nicolasstucki

doc-tool/resources/_layouts/doc-page.html

@@ -13,10 +13,10 @@
     {% include "sidebar" %}
 
     <div id="content-body" class="doc-page-body">
+        <h1 id="doc-page-title">{{ page.title }}</h1>
         <a id="edit-on-github" href="{{ site.projectUrl }}/edit/master/{{ site.root }}/{{ page.url }}">
             Edit this page on GitHub
         </a>
-        <h1 id="doc-page-title">{{ page.title }}</h1>
         <hr/>
         <div id="doc-page-container">
             {{ content }}

doc-tool/resources/css/api-page.css

@@ -165,3 +165,21 @@ div.entity-section > div.member > div.member-body > div.member-body-long.toggled
 div.entity-section.toggled {
     display: none;
 }
+
+@media screen and (max-width: 576px) {
+    a#edit-on-github {
+        position: static !important;
+    }
+}
+
+@media screen and (min-width: 576px) and (max-width: 899px) {
+    a#edit-on-github {
+        right: 10px !important;
+    }
+}
+
+@media screen and (min-width: 899px) and (max-width: 1046px) {
+    a#edit-on-github {
+        position: static !important;
+    }
+}

doc-tool/resources/css/sidebar.css

@@ -235,7 +235,7 @@ div#cover-block {
 }
 
 /** Tablet (576px <= x < 768px) sidebar: Defaults closed with 250px wide sidebar */
-@media screen and (min-width: 576px) and (max-width: 899px) {
+@media screen and (max-width: 899px) {
     div#content-wrapper {}
     div#content-wrapper div#content-body {}
     div#content-wrapper div#content-body.doc-page-body { padding-right: 0; }