From 7d3c390c91ddee142270dd8faee79b352a61d4f1 Mon Sep 17 00:00:00 2001 From: tomasz1986 Date: Tue, 13 Sep 2022 19:18:57 +0200 Subject: [PATCH] gui: Fix text wrapping on tablet-sized screens (fixes #8529) (#8533) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- gui/default/assets/css/overrides.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css index 527c5cc59..b5b0de59e 100644 --- a/gui/default/assets/css/overrides.css +++ b/gui/default/assets/css/overrides.css @@ -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 {