address table mobile overflow, tweak appearance (#4541)

Author: Simek

website/src/css/customTheme.scss

@@ -39,6 +39,10 @@
   --ifm-pagination-nav-color-hover: var(--ifm-color-emphasis-300);
   --ifm-navbar-sidebar-width: 100%;
   --ifm-hr-border-color: var(--docusaurus-collapse-button-bg-hover);
+  --ifm-table-head-background: var(--ifm-color-emphasis-100);
+  --ifm-table-border-color: var(--ifm-toc-border-color);
+  --ifm-table-cell-padding: 10px;
+  --ifm-table-stripe-background: rgba(0, 0, 0, 0.02);
   --docusaurus-blog-social-icon-size: 16px;
 
   @media (min-width: 340px) {
@@ -103,6 +107,8 @@ html[data-theme="dark"] {
   --ifm-code-background: rgba(255, 255, 255, 0.06);
   --ifm-toc-border-color: var(--dark);
   --ifm-color-emphasis-300: var(--dark);
+  --ifm-table-head-background: var(--deepdark);
+  --ifm-table-head-color: var(--docsearch-muted-color);
 
   *[class^="DocSearch"] {
     --docsearch-searchbox-background: var(--ifm-background-color);
@@ -305,32 +311,30 @@ hr {
   }
 
   table {
-    border-collapse: collapse;
     display: table;
-    margin: 20px 0;
     width: 100%;
+    table-layout: fixed;
 
     thead tr {
       border: 0;
     }
 
     tr th {
-      text-transform: uppercase;
-      padding: 6px 10px;
-      font-size: 0.7rem;
+      padding: 6px var(--ifm-table-cell-padding);
+      font-size: 80%;
       text-align: start;
     }
 
     tr td {
       font-size: 90%;
       line-height: 1.3em;
-      padding: 10px;
       text-align: start;
 
       code {
         display: inline-block;
         line-height: 1.2em;
         vertical-align: top;
+        word-break: break-word;
       }
 
       ul {
@@ -445,6 +449,16 @@ hr {
   }
 }
 
+@media only screen and (max-width: 996px) {
+  .markdown table {
+    display: block;
+
+    tr td code {
+      word-break: normal;
+    }
+  }
+}
+
 html[data-theme="dark"] {
   .markdown {
     a {