gui: Fix text wrapping on tablet-sized screens (fixes #8529) (#8533)

Currently, the code contains a "mobile phone" fix to allow wrapping of
long lines in table heading and cells. However, the fix is applied to
all screen sizes equal or below 768 px wide, which causes the layout to
break on tablet-sized screens.

The commit moves the "mobile" fix to the actual mobile media query,
which is applied to screens up to 419 px wide. It is only really needed
there, where it synergises with the existing fix that changes table cell
display to "block". There is no need to wrap the text on larger screens,
as there is more than enough space to display the lines in full on them.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
This commit is contained in:
tomasz1986 2022-09-13 19:18:57 +02:00 committed by GitHub
parent 3e99ddfbf0
commit 7d3c390c91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -420,15 +420,6 @@ ul.three-columns li, ul.two-columns li {
height: 276px;
}
table.table-auto td,
table.table-auto th,
table.table-condensed td,
table.table-condensed th {
/* for mobile phones to allow linebreaks in long repro folder/shared with
* columns. */
white-space: normal;
}
.two-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
@ -488,6 +479,15 @@ ul.three-columns li, ul.two-columns li {
.modal-footer {
padding-bottom: 5px;
}
table.table-auto td,
table.table-auto th,
table.table-condensed td,
table.table-condensed th {
/* for mobile phones to allow linebreaks in long repro folder/shared with
* columns. */
white-space: normal;
}
}
.form-horizontal .form-group {