wholetrans/docs-matrix-spec
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use auto table-layout on desktop (#1601)

Browse source 
Signed-off-by: Martin Fischer <martin@push-f.com>
This commit is contained in:
Martin Fischer 2023-07-20 09:23:16 +02:00 • committed by GitHub
parent 4f39ad2a24
commit 1a11a7b998
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

57
assets/scss/custom.scss
View file

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

1
changelogs/internal/newsfragments/1601.clarification Normal file
View file

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