Docs overflow with big strings break style

Adding overflow-x scroll to maintain the page style

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css

@@ -154,50 +154,52 @@
       font-size: .85em; }
       .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong {
         display: block; }
-  .docs-page .docs-content .docs-link-btns {
+  .docs-page .docs-content {
-    border-bottom: 1px solid #f4f5f7;
+    overflow-x: scroll; }
-    background: #fdfdfd;
+    .docs-page .docs-content .docs-link-btns {
-    padding: 10px 20px;
+      border-bottom: 1px solid #f4f5f7;
-    margin: 0 -15px;
+      background: #fdfdfd;
-    text-align: right;
+      padding: 10px 20px;
-    font-size: .8em; }
+      margin: 0 -15px;
-    .docs-page .docs-content .docs-link-btns a {
+      text-align: right;
-      color: #999; }
+      font-size: .8em; }
-      .docs-page .docs-content .docs-link-btns a:hover {
+      .docs-page .docs-content .docs-link-btns a {
-        color: #444;
+        color: #999; }
-        text-decoration: none; }
+        .docs-page .docs-content .docs-link-btns a:hover {
-  .docs-page .docs-content .docs-text-field {
+          color: #444;
-    padding: 2rem; }
+          text-decoration: none; }
-  .docs-page .docs-content article.docs-body h1 {
+    .docs-page .docs-content .docs-text-field {
-    padding-top: 2rem;
+      padding: 2rem; }
-    font-size: 2.25rem;
+    .docs-page .docs-content article.docs-body h1 {
-    padding-bottom: 10px; }
+      padding-top: 2rem;
-  .docs-page .docs-content article.docs-body h2 {
+      font-size: 2.25rem;
-    padding-top: 2rem;
+      padding-bottom: 10px; }
-    padding-bottom: 10px;
+    .docs-page .docs-content article.docs-body h2 {
-    font-size: 2rem; }
+      padding-top: 2rem;
-  .docs-page .docs-content article.docs-body h3, .docs-page .docs-content article.docs-body h4, .docs-page .docs-content article.docs-body h5, .docs-page .docs-content article.docs-body h6 {
+      padding-bottom: 10px;
-    padding-top: 20px;
+      font-size: 2rem; }
-    padding-bottom: 5px;
+    .docs-page .docs-content article.docs-body h3, .docs-page .docs-content article.docs-body h4, .docs-page .docs-content article.docs-body h5, .docs-page .docs-content article.docs-body h6 {
-    font-size: 1.5rem; }
+      padding-top: 20px;
-  .docs-page .docs-content article.docs-body h1, .docs-page .docs-content article.docs-body h2, .docs-page .docs-content article.docs-body h3, .docs-page .docs-content article.docs-body h4, .docs-page .docs-content article.docs-body h5, .docs-page .docs-content article.docs-body h6 {
+      padding-bottom: 5px;
-    position: relative; }
+      font-size: 1.5rem; }
-    .docs-page .docs-content article.docs-body h1 .anchor, .docs-page .docs-content article.docs-body h2 .anchor, .docs-page .docs-content article.docs-body h3 .anchor, .docs-page .docs-content article.docs-body h4 .anchor, .docs-page .docs-content article.docs-body h5 .anchor, .docs-page .docs-content article.docs-body h6 .anchor {
+    .docs-page .docs-content article.docs-body h1, .docs-page .docs-content article.docs-body h2, .docs-page .docs-content article.docs-body h3, .docs-page .docs-content article.docs-body h4, .docs-page .docs-content article.docs-body h5, .docs-page .docs-content article.docs-body h6 {
-      position: absolute;
+      position: relative; }
-      right: -26px;
+      .docs-page .docs-content article.docs-body h1 .anchor, .docs-page .docs-content article.docs-body h2 .anchor, .docs-page .docs-content article.docs-body h3 .anchor, .docs-page .docs-content article.docs-body h4 .anchor, .docs-page .docs-content article.docs-body h5 .anchor, .docs-page .docs-content article.docs-body h6 .anchor {
-      font-size: 18px;
+        position: absolute;
-      bottom: 5px;
+        right: -26px;
-      color: #999;
+        font-size: 18px;
-      opacity: 0;
+        bottom: 5px;
-      transition: .5s; }
+        color: #999;
-    .docs-page .docs-content article.docs-body h1:hover .anchor, .docs-page .docs-content article.docs-body h2:hover .anchor, .docs-page .docs-content article.docs-body h3:hover .anchor, .docs-page .docs-content article.docs-body h4:hover .anchor, .docs-page .docs-content article.docs-body h5:hover .anchor, .docs-page .docs-content article.docs-body h6:hover .anchor {
+        opacity: 0;
-      opacity: 1; }
+        transition: .5s; }
-  .docs-page .docs-content article.docs-body img {
+      .docs-page .docs-content article.docs-body h1:hover .anchor, .docs-page .docs-content article.docs-body h2:hover .anchor, .docs-page .docs-content article.docs-body h3:hover .anchor, .docs-page .docs-content article.docs-body h4:hover .anchor, .docs-page .docs-content article.docs-body h5:hover .anchor, .docs-page .docs-content article.docs-body h6:hover .anchor {
-    max-width: 100%;
+        opacity: 1; }
-    border: 1px solid #f4f5f7;
+    .docs-page .docs-content article.docs-body img {
-    margin: 15px 0 25px;
+      max-width: 100%;
-    box-shadow: 0 0 45px #f8f9fa;
+      border: 1px solid #f4f5f7;
-    border-radius: 6px; }
+      margin: 15px 0 25px;
+      box-shadow: 0 0 45px #f8f9fa;
+      border-radius: 6px; }
   .docs-page .docs-page-index {
     min-height: 100vh; }
     .docs-page .docs-page-index #scroll-index {

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

@@ -259,6 +259,8 @@ body {
     }
 
     .docs-content {
+        overflow-x:scroll;
+
         .docs-link-btns {
             border-bottom: 1px solid #f4f5f7;
             background: #fdfdfd;