From c044cb2de3e746a96af338414933509d9638de3b Mon Sep 17 00:00:00 2001 From: Giteabot Date: Tue, 16 Apr 2024 08:24:06 +0800 Subject: [PATCH] Fix various overflows on actions view (#30344) (#30505) Backport #30344 by @silverwind Fix a number of text overflow issues in actions view and run list. Also improve mobile view of run list. Fixes: https://github.com/go-gitea/gitea/issues/30328 Screenshot 2024-04-08 at 23 10 16 Screenshot 2024-04-08 at 23 17 46 Screenshot 2024-04-08 at 23 49 05 Screenshot 2024-04-08 at 23 55 30 Co-authored-by: silverwind (cherry picked from commit 00179f637d9add4e42edf6185cd641eb98115970) --- templates/repo/actions/runs_list.tmpl | 14 ++++++------- web_src/css/actions.css | 26 +++++++++++++++++++++++- web_src/js/components/RepoActionView.vue | 16 ++++++++++----- 3 files changed, 43 insertions(+), 13 deletions(-) diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl index ac5049cf56..20330b5d62 100644 --- a/templates/repo/actions/runs_list.tmpl +++ b/templates/repo/actions/runs_list.tmpl @@ -1,4 +1,4 @@ -
+
{{if not .Runs}}
{{svg "octicon-no-entry" 48}} @@ -28,14 +28,14 @@
{{if .RefLink}} - {{.PrettyRef}} + {{.PrettyRef}} {{else}} - {{.PrettyRef}} + {{.PrettyRef}} {{end}} -
-
-
{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated ctx.Locale}}
-
{{svg "octicon-stopwatch" 16}}{{.Duration}}
+
+
{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated ctx.Locale}}
+
{{svg "octicon-stopwatch" 16}}{{.Duration}}
+
{{end}} diff --git a/web_src/css/actions.css b/web_src/css/actions.css index 1d5bea2395..0ab09f537a 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -44,9 +44,10 @@ } .run-list-item-right { - flex: 0 0 min(20%, 130px); + width: 130px; display: flex; flex-direction: column; + flex-shrink: 0; gap: 3px; color: var(--color-text-light); } @@ -57,3 +58,26 @@ gap: .25rem; align-items: center; } + +.run-list .flex-item-trailing { + flex-wrap: nowrap; + width: 280px; + flex: 0 0 280px; +} + +.run-list-ref { + display: inline-block !important; +} + +@media (max-width: 767.98px) { + .run-list .flex-item-trailing { + flex-direction: column; + align-items: flex-end; + width: auto; + flex-basis: auto; + } + .run-list-item-right, + .run-list-ref { + max-width: 110px; + } +} diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 378f726688..28d1b754a2 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -382,7 +382,7 @@ export function initRepositoryActionView() { -
@@ -391,8 +391,8 @@ export function initRepositoryActionView() { {{ run.commit.shortSHA }} {{ run.commit.localePushedBy }} {{ run.commit.pusher.displayName }} - - {{ run.commit.branch.name }} + + {{ run.commit.branch.name }}
@@ -435,8 +435,8 @@ export function initRepositoryActionView() {
-
-

+
+

{{ currentJob.title }}

@@ -512,6 +512,7 @@ export function initRepositoryActionView() { display: flex; align-items: center; justify-content: space-between; + gap: 8px; } .action-info-summary-title { @@ -522,6 +523,7 @@ export function initRepositoryActionView() { font-size: 20px; margin: 0 0 0 8px; flex: 1; + overflow-wrap: anywhere; } .action-summary { @@ -737,6 +739,10 @@ export function initRepositoryActionView() { font-size: 12px; } +.job-info-header-left { + flex: 1; +} + .job-step-container { max-height: 100%; border-radius: 0 0 var(--border-radius) var(--border-radius);