From fe9a631939f36d6a7b30a1ec74e012d029f80daf Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
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 8b39d0504b5..6fdbae5a561 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 */