From 1a11a7b9988347f7e3e9ff6a7330182c8b7ba73a Mon Sep 17 00:00:00 2001
From: Martin Fischer <martin@push-f.com>
Date: Thu, 20 Jul 2023 09:23:16 +0200
Subject: [PATCH] Use auto table-layout on desktop (#1601)

Signed-off-by: Martin Fischer <martin@push-f.com>
---
 assets/scss/custom.scss                       | 57 ++++++++++---------
 .../internal/newsfragments/1601.clarification |  1 +
 2 files changed, 32 insertions(+), 26 deletions(-)
 create mode 100644 changelogs/internal/newsfragments/1601.clarification

diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 047e57d7..c147b645 100644
--- 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 {
diff --git a/changelogs/internal/newsfragments/1601.clarification b/changelogs/internal/newsfragments/1601.clarification
new file mode 100644
index 00000000..1b9a529e
--- /dev/null
+++ b/changelogs/internal/newsfragments/1601.clarification
@@ -0,0 +1 @@
+Improve the layout of tables on desktop displays. Contributed by @not-my-profile.