From fe9a631939f36d6a7b30a1ec74e012d029f80daf Mon Sep 17 00:00:00 2001 From: Giteabot Date: Sun, 18 Aug 2024 08:34:05 +0800 Subject: [PATCH] Fix overflowing content in action run log (#31842) (#31853) Backport #31842 by @Adrian-Hirt When a long line with characters such as dots is returned by a step in an action (e.g. by the output of the Ruby on Rails test runner), it overflows the log container, causing the page to scroll sideways (see first screenshot): ![before](https://github.com/user-attachments/assets/d71a8446-2c81-42d7-ad20-92514884365a) This PR adds the CSS `overflow-wrap: anywhere;` to the `.job-step-section .job-step-logs .job-log-line .log-msg` selector, which causes such lines to wrap as well (see second screenshot in which the line wraps nicely): ![after](https://github.com/user-attachments/assets/ba9abaec-dc0b-4fab-8129-b9341d4bf784) Co-authored-by: Adrian Hirt <13788379+Adrian-Hirt@users.noreply.github.com> --- web_src/js/components/RepoActionView.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 8b39d0504b5d..6fdbae5a561c 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -861,6 +861,7 @@ export function initRepositoryActionView() { word-break: break-all; white-space: break-spaces; margin-left: 10px; + overflow-wrap: anywhere; } /* selectors here are intentionally exact to only match fullscreen */