diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 047e57d76..c147b6458 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 000000000..1b9a529ee --- /dev/null +++ b/changelogs/internal/newsfragments/1601.clarification @@ -0,0 +1 @@ +Improve the layout of tables on desktop displays. Contributed by @not-my-profile.