commit 88635cbd702d875c91df3c754f27b7245b5c35c2
author Alex Rakoczy <alex@golang.org> Thu Jun 23 16:48:24 2022 -0400
committer Alex Rakoczy <alex@golang.org> Thu Jun 23 21:26:13 2022 +0000
tree 11874d92ec8fdd026a8f0dfbdd47da58624f7ac5
parent 65ed0106ebe4c684543ca3be6e4b5cec45206eea

internal/relui: handle long log lines

Some log lines can be excessively long, breaking the page layout. This
change switches to a fixed table layout that will more gracefully handle
excessively long log lines.

For golang/go#53382

Change-Id: Ib49a086465a56c657480c52af436a5cdc06cb405
Reviewed-on: https://go-review.googlesource.com/c/build/+/413581
Run-TryBot: Alex Rakoczy <alex@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>

internal/relui/static/styles.css

diff --git a/internal/relui/static/styles.css b/internal/relui/static/styles.css
index cc77db1..d4e9424 100644
--- a/internal/relui/static/styles.css
+++ b/internal/relui/static/styles.css
@@ -156,6 +156,7 @@
   border-bottom: 0.0625rem solid #d6d6d6;
   border-collapse: collapse;
   margin-bottom: 1rem;
+  table-layout: fixed;
   width: 100%;
 }
 .TaskList-itemHeaderCol {
@@ -201,9 +202,12 @@
 .TaskList-expanded.TaskList-itemLogsRow {
   display: table-row;
 }
+.TaskList-itemState {
+  max-width: 4rem;
+  width: 3rem;
+}
 .TaskList-itemCol.TaskList-itemState {
   padding: 0.25rem 0 0;
-  width: 3.25rem;
 }
 .TaskList-itemStateIcon {
   height: 1.25rem;
@@ -219,6 +223,8 @@
 }
 .TaskList-itemLogLine {
   font-family: monospace;
+  overflow: auto;
+  overflow-wrap: anywhere;
   padding: 0 1rem;
   tab-size: 4;
   white-space: pre-wrap;