From 1bb0e097b77e980f35d5ef96b60dd6d02e3929b2 Mon Sep 17 00:00:00 2001
From: Rushan <rushenn123@gmail.com>
Date: Tue, 23 Aug 2022 23:49:05 +0400
Subject: [PATCH] Add responsive wrappers for tables  (#533)

* Add responsive wrappers for tables

* Add missing styles
---
 source/_static/js/main.js                 | 16 +++++++++++++++
 source/_static/scss/includes/_alert.scss  |  4 ++++
 source/_static/scss/includes/_header.scss |  2 +-
 source/_static/scss/includes/_reset.scss  | 25 +++++++++++++++++++++++
 4 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/source/_static/js/main.js b/source/_static/js/main.js
index f201ef10..8585edc8 100644
--- a/source/_static/js/main.js
+++ b/source/_static/js/main.js
@@ -334,4 +334,20 @@ window.addEventListener("DOMContentLoaded", (event) => {
       }
     }
   })();
+
+
+  // --------------------------------------------------
+  // Responsive tables
+  // --------------------------------------------------
+  (function () {
+    const tableEls = document.querySelectorAll("table");
+    if(tableEls.length > 0) {
+      tableEls.forEach((item) => {
+        var tableWrapper = document.createElement("div");
+        tableWrapper.classList.add("table-responsive");
+        item.insertAdjacentElement("beforebegin", tableWrapper);
+        tableWrapper.appendChild(item);
+      });
+    }
+  })();
 });
\ No newline at end of file
diff --git a/source/_static/scss/includes/_alert.scss b/source/_static/scss/includes/_alert.scss
index 6520e390..15bcd0a1 100644
--- a/source/_static/scss/includes/_alert.scss
+++ b/source/_static/scss/includes/_alert.scss
@@ -29,6 +29,10 @@ div.admonition {
 
     code {
         color: currentColor;
+
+        &.xref {
+            border: 0;
+        }
     }
 
     .highlight {
diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss
index d1532c79..161b0ddf 100644
--- a/source/_static/scss/includes/_header.scss
+++ b/source/_static/scss/includes/_header.scss
@@ -143,7 +143,7 @@
 			}
 
 			@include breakpoint-max(breakpoints(lg)) {
-				top: 10rem
+				top: 7.2rem
 			}
 
 			&:not(.active) {
diff --git a/source/_static/scss/includes/_reset.scss b/source/_static/scss/includes/_reset.scss
index 58c7f4be..cebc9824 100644
--- a/source/_static/scss/includes/_reset.scss
+++ b/source/_static/scss/includes/_reset.scss
@@ -208,6 +208,31 @@ table.docutils {
 }
 
 
+.table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: 1rem 0 2rem;
+    border-left: 1px solid var(--table-border-color);
+    border-right: 1px solid var(--table-border-color);
+
+    table {
+        margin: 0;
+
+        tr {
+            td, th {
+                &:first-child {
+                    border-left-color: transparent;
+                }
+
+                &:last-child {
+                    border-right-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+
 // ----------------------
 // Form
 // ----------------------