make it big screen friendly

3 files changed, 10 insertions, 2 deletions

diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 6c6e17fd5..540c4c733 100644
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -13,11 +13,11 @@
     {% include nav-home.html %}
 
     <div class="container-fluid">
-      <div class="row">
+      <div class="row flex-xl-nowrap">
         <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
           {% include nav-docs.html %}
         </div>
-        <main class="col-12 col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content" role="main">
+        <main class="col-12 col-md-9 col-xl-auto py-md-3 pl-md-5 bd-content" role="main">
           <h1 class="bd-title" id="content">{{ page.title }}</h1>
           <p class="bd-lead">{{ page.description }}</p>
           {% include ads.html %}
diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
index 086efbe14..4a30d74d4 100644
--- a/docs/assets/scss/_content.scss
+++ b/docs/assets/scss/_content.scss
@@ -6,6 +6,7 @@
 
 .bd-content {
   @include media-breakpoint-up(xl) {
+    max-width: calc(100% - 320px);
     padding-right: 20%;
 
     #contents {
@@ -24,6 +25,12 @@
     }
   }
 
+  @media (min-width: 2000px) {
+    #markdown-toc {
+      padding-left: 6rem;
+    }
+  }
+
   // Hack the sticky header
   h2[id],
   h3[id] {
diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
index 4ac556f8a..c5462e6cb 100644
--- a/docs/assets/scss/_sidebar.scss
+++ b/docs/assets/scss/_sidebar.scss
@@ -12,6 +12,7 @@
   @include media-breakpoint-up(md) {
     position: sticky;
     top: 4rem;
+    max-width: 320px;
     max-height: calc(100vh - 4rem);
     overflow-y: auto;
   }