From e29257e15c25222f03a78dbc5cf83f95fc86cbab Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Thu, 9 Feb 2023 18:43:59 +0800
Subject: [PATCH 1/4] fix: style of actions rerun button

---
 web_src/js/components/RepoActionView.vue | 38 ++++++++++++++++--------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 703fe59d811c..64fbcb2f9f87 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -12,19 +12,20 @@
       <div class="action-view-left">
         <div class="job-group-section">
           <div class="job-brief-list">
-            <a class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id" :href="run.link+'/jobs/'+index">
-              <SvgIcon name="octicon-check-circle-fill" class="green" v-if="job.status === 'success'"/>
-              <SvgIcon name="octicon-skip" class="ui text grey" v-else-if="job.status === 'skipped'"/>
-              <SvgIcon name="octicon-clock" class="ui text yellow" v-else-if="job.status === 'waiting'"/>
-              <SvgIcon name="octicon-blocked" class="ui text yellow" v-else-if="job.status === 'blocked'"/>
-              <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/>
-              <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
-              {{ job.name }}
-              <!-- TODO: it will be a better idea to move "button" out from "a", and the ".prevent" will not be needed. But it needs some work with CSS -->
+            <div class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id">
+              <a class="job-brief-link" :href="run.link+'/jobs/'+index">
+                <SvgIcon name="octicon-check-circle-fill" class="green" v-if="job.status === 'success'"/>
+                <SvgIcon name="octicon-skip" class="ui text grey" v-else-if="job.status === 'skipped'"/>
+                <SvgIcon name="octicon-clock" class="ui text yellow" v-else-if="job.status === 'waiting'"/>
+                <SvgIcon name="octicon-blocked" class="ui text yellow" v-else-if="job.status === 'blocked'"/>
+                <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/>
+                <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
+                <span class="ui text">{{ job.name }}</span>
+              </a>
               <button class="job-brief-rerun" @click.prevent="rerunJob(index)" v-if="job.canRerun">
                 <SvgIcon name="octicon-sync" class="ui text black"/>
               </button>
-            </a>
+            </div>
           </div>
         </div>
       </div>
@@ -327,13 +328,15 @@ export function initRepositoryActionView() {
   }
 
   .job-brief-list {
-    a.job-brief-item {
-      display: block;
+    div.job-brief-item {
       margin: 5px 0;
       padding: 10px;
       background: var(--color-info-bg);
       border-radius: 5px;
       text-decoration: none;
+      display: flex;
+      justify-items: center;
+      flex-wrap: nowrap;
       button.job-brief-rerun {
         float: right;
         border: none;
@@ -345,8 +348,17 @@ export function initRepositoryActionView() {
       button.job-brief-rerun:hover{
         transform:scale(130%);
       };
+      a.job-brief-link {
+        flex-grow: 1;
+        display: flex;
+        span {
+          margin-right: 8px;
+          display: flex;
+          align-items: center;
+        }
+      }
     }
-    a.job-brief-item:hover {
+    div.job-brief-item:hover {
       background-color: var(--color-secondary);
     }
   }

From 38da50ead71424d2529420ef1c05304581dbffa6 Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Thu, 9 Feb 2023 21:24:56 +0800
Subject: [PATCH 2/4] fix: remove .prevent

---
 web_src/js/components/RepoActionView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 64fbcb2f9f87..feab5d9fe993 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -22,7 +22,7 @@
                 <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
                 <span class="ui text">{{ job.name }}</span>
               </a>
-              <button class="job-brief-rerun" @click.prevent="rerunJob(index)" v-if="job.canRerun">
+              <button class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun">
                 <SvgIcon name="octicon-sync" class="ui text black"/>
               </button>
             </div>

From becdae7befb55612735cf2bafc19be9d41887108 Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Fri, 10 Feb 2023 14:06:06 +0800
Subject: [PATCH 3/4] Update web_src/js/components/RepoActionView.vue

Co-authored-by: silverwind <me@silverwind.io>
---
 web_src/js/components/RepoActionView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index feab5d9fe993..739d869aae62 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -358,7 +358,7 @@ export function initRepositoryActionView() {
         }
       }
     }
-    div.job-brief-item:hover {
+    .job-brief-item:hover {
       background-color: var(--color-secondary);
     }
   }

From a8fdc31f7d83b4fdee1130dc31d879e13173a8d6 Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Fri, 10 Feb 2023 14:09:38 +0800
Subject: [PATCH 4/4] fix: simplify css selector

---
 web_src/js/components/RepoActionView.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 739d869aae62..ddc7139a2e2e 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -292,7 +292,7 @@ export function initRepositoryActionView() {
 
 .action-view-header {
   margin: 0 20px 20px 20px;
-  button.run_cancel {
+  .run_cancel {
     border: none;
     color: var(--color-red);
     background-color: transparent;
@@ -300,7 +300,7 @@ export function initRepositoryActionView() {
     cursor: pointer;
     transition:transform 0.2s;
   };
-  button.run_cancel:hover{
+  .run_cancel:hover{
     transform:scale(130%);
   };
 }
@@ -328,7 +328,7 @@ export function initRepositoryActionView() {
   }
 
   .job-brief-list {
-    div.job-brief-item {
+    .job-brief-item {
       margin: 5px 0;
       padding: 10px;
       background: var(--color-info-bg);
@@ -337,7 +337,7 @@ export function initRepositoryActionView() {
       display: flex;
       justify-items: center;
       flex-wrap: nowrap;
-      button.job-brief-rerun {
+      .job-brief-rerun {
         float: right;
         border: none;
         background-color: transparent;
@@ -345,10 +345,10 @@ export function initRepositoryActionView() {
         cursor: pointer;
         transition:transform 0.2s;
       };
-      button.job-brief-rerun:hover{
+      .job-brief-rerun:hover{
         transform:scale(130%);
       };
-      a.job-brief-link {
+      .job-brief-link {
         flex-grow: 1;
         display: flex;
         span {