From e9286421a1bd56b6cc04ddbf2f393e4cf42cd355 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Tue, 6 Aug 2019 16:52:56 +0200 Subject: [PATCH] Platform: improve the UX of windowless Emscripten apps. * Wrap the text like in a console because nobody wants to read kilometers-long horizontal lines with a horizontal scrollbar * Make the output fill at least the space given to it but let it expand beyond because a vertical scrollbar in an area of this size is useless as well. --- src/Magnum/Platform/WebApplication.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Magnum/Platform/WebApplication.css b/src/Magnum/Platform/WebApplication.css index de22e9e32..04c75ce12 100644 --- a/src/Magnum/Platform/WebApplication.css +++ b/src/Magnum/Platform/WebApplication.css @@ -112,12 +112,12 @@ body { #canvas, pre#log { max-width: 100%; width: 100%; - height: 100%; z-index: 10; border-radius: 0.2rem; /*var(--border-radius)*/ } #canvas:focus { outline-color: #5b9dd9; } /*var(--header-link-current-color)*/ #canvas { + height: 100%; margin-bottom: -0.25rem; /* otherwise there's scrollbar w/ fullsize (why?) */ } #status, #status-description { @@ -140,8 +140,12 @@ body { display: none; } pre#log { + /* Make it fill at least the space given to it but let it expand beyond + (scrollbars in that tiny area are useless) */ + min-height: 100%; padding: 0.5rem 1rem; - overflow-x: auto; + white-space: pre-wrap; /* same as .m-console-wrap */ + word-break: break-all; margin-top: 0; /* stupid defaults */ color: #e6e6e6; /*var(--code-color)*/ background-color: #282e36; /*var(--code-background-color)*/