From 00b98bc8e0abd6aa4e581550b6ae0b6d4a9ee144 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Tue, 27 Jun 2023 22:34:33 +0800
Subject: [PATCH] Fix rerun icon on action view component (#25531)

Right now rerun icon on action view component will not be seen when
duration text length is long, because the wrapper `job-brief-info` has a
fixed width, and the svg is squeezed. The way to fix this in this PR is
to change width to `fit-content` and exchange position of duration text
and rerun svg.

Before (rerun svg not shown on hover):

<img width="1401" alt="Screen Shot 2023-06-27 at 12 53 41"
src="https://github.com/go-gitea/gitea/assets/17645053/bb3f62ec-8c56-4dbc-96f1-718b50426d91">

After:

<img width="1409" alt="Screen Shot 2023-06-27 at 12 50 59"
src="https://github.com/go-gitea/gitea/assets/17645053/620aa02c-2326-408d-a763-453f48f42c40">
---
 web_src/js/components/RepoActionView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index fd40bd7ee5..dcbb598052 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -38,8 +38,8 @@
                 <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span>
               </a>
               <span class="job-brief-info">
-                <span class="step-summary-duration">{{ job.duration }}</span>
                 <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-if="job.canRerun && onHoverRerunIndex === job.id"/>
+                <span class="step-summary-duration">{{ job.duration }}</span>
               </span>
             </div>
           </div>
@@ -590,6 +590,7 @@ export function initRepositoryActionView() {
 .job-brief-item .job-brief-link {
   display: flex;
   width: 100%;
+  min-width: 0;
 }
 
 .job-brief-item .job-brief-link span {
@@ -610,7 +611,6 @@ export function initRepositoryActionView() {
 .job-brief-item .job-brief-info {
   display: flex;
   align-items: center;
-  width: 55px;
 }
 
 /* ================ */