Use auto table-layout on desktop

Signed-off-by: Martin Fischer <martin@push-f.com>
matrix-org · Jul 19, 2023 · 0d201e8 · 0d201e8
1 parent 7465249
commit 0d201e8
Showing 1 changed file with 31 additions and 26 deletions.
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -350,19 +350,37 @@ footer {
   }
 
   table {
-    /* Docsy makes all tables "responsive tables", which causes Bootstrap 4 to create
-     * tables with a "display" property of "block".
-     *
-     * However, for "table-layout: fixed" to be effective, an element must have a
-     * "display" property of "table".
-     *
-     * Thus, we override the "display" property here. This may no longer be necessary once
-     * Docsy updates to Bootstrap v5+: https://github.com/google/docsy/issues/470.
-     * For more details, see
-     * https://github.com/matrix-org/matrix-spec/pull/1295/files#r1010759688 */
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    @media (max-width: 800px) {
+      /* Docsy by default applies `overflow-x: auto;` to tables, which
+       * results in annoying horizontal scrolling on mobile, so we instead
+       * switch to a fixed table layout on a narrow browser width.
+       * (On a wider width the default auto table-layout provides better readability.)
+
+       * Docsy makes all tables "responsive tables", which causes Bootstrap 4 to create
+       * tables with a "display" property of "block".
+       * However, for "table-layout: fixed" to be effective, an element must have a
+       * "display" property of "table".
+       *
+       * Thus, we override the "display" property here. This may no longer be necessary once
+       * Docsy updates to Bootstrap v5+: https://github.com/google/docsy/issues/470.
+       * For more details, see
+       * https://github.com/matrix-org/matrix-spec/pull/1295/files#r1010759688 */
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      .col-name, .col-type, .col-status {
+        width: 25%;
+      }
+
+      .col-description {
+        width: 50%;
+      }
+
+      .col-status-description {
+        width: 75%;
+      }
+    }
 
     // add some space between two tables when they are right next to each other
     & + table {
@@ -409,19 +427,6 @@ footer {
     &.basic-info th {
       width: 15rem;
     }
-
-    .col-name, .col-type, .col-status {
-      width: 25%;
-    }
-
-    .col-description {
-      width: 50%;
-    }
-
-    .col-status-description {
-      width: 75%;
-    }
-
   }
 
   pre {