Use auto table-layout on desktop (#1601)

Signed-off-by: Martin Fischer <martin@push-f.com>

assets/scss/custom.scss

@@ -350,9 +350,14 @@ footer {
   }
 
   table {
-    /* Docsy makes all tables "responsive tables", which causes Bootstrap 4 to create
-     * tables with a "display" property of "block".
+    @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".
        *
@@ -364,6 +369,19 @@ footer {
       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 {
         margin-top: 4rem;
@@ -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 {

changelogs/internal/newsfragments/1601.clarification

@@ -0,0 +1 @@
+Improve the layout of tables on desktop displays. Contributed by @not-my-profile.