From 4e99247a62b2c0dd2234fccf071b419c951569b2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 8 Apr 2024 23:50:14 +0200
Subject: [PATCH 1/5] Fix various overflows on actions view

---
 templates/repo/actions/runs_list.tmpl    | 14 +++++++-------
 web_src/css/actions.css                  | 24 +++++++++++++++++++++++-
 web_src/js/components/RepoActionView.vue | 16 +++++++++++-----
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl
index ac5049cf561ba..20330b5d62eb8 100644
--- a/templates/repo/actions/runs_list.tmpl
+++ b/templates/repo/actions/runs_list.tmpl
@@ -1,4 +1,4 @@
-<div class="flex-list">
+<div class="flex-list run-list">
 	{{if not .Runs}}
 	<div class="empty-placeholder">
 		{{svg "octicon-no-entry" 48}}
@@ -28,14 +28,14 @@
 			</div>
 			<div class="flex-item-trailing">
 				{{if .RefLink}}
-					<a class="ui label tw-px-1 tw-mx-0" href="{{.RefLink}}">{{.PrettyRef}}</a>
+					<a class="ui label run-list-ref gt-ellipsis" href="{{.RefLink}}">{{.PrettyRef}}</a>
 				{{else}}
-					<span class="ui label tw-px-1 tw-mx-0">{{.PrettyRef}}</span>
+					<span class="ui label run-list-ref gt-ellipsis">{{.PrettyRef}}</span>
 				{{end}}
-			</div>
-			<div class="run-list-item-right">
-				<div class="run-list-meta">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated ctx.Locale}}</div>
-				<div class="run-list-meta">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div>
+				<div class="run-list-item-right">
+					<div class="run-list-meta">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated ctx.Locale}}</div>
+					<div class="run-list-meta">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div>
+				</div>
 			</div>
 		</div>
 	{{end}}
diff --git a/web_src/css/actions.css b/web_src/css/actions.css
index 1d5bea2395e5c..bbbf29f291cbd 100644
--- a/web_src/css/actions.css
+++ b/web_src/css/actions.css
@@ -44,7 +44,7 @@
 }
 
 .run-list-item-right {
-  flex: 0 0 min(20%, 130px);
+  width: 130px;
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -57,3 +57,25 @@
   gap: .25rem;
   align-items: center;
 }
+
+.run-list .flex-item-trailing {
+  flex-wrap: nowrap;
+}
+
+.run-list-ref {
+  display: inline-block !important;
+  max-width: 200px;
+}
+
+@media (max-width: 767.98px) {
+  .run-list .flex-item-trailing {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  .run-list-item-right {
+    width: 90px;
+  }
+  .run-list-ref {
+    max-width: 90px;
+  }
+}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 06c42f0b35dae..16ce3fc80da4a 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -377,7 +377,7 @@ export function initRepositoryActionView() {
         <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
           {{ locale.cancel }}
         </button>
-        <button class="ui basic small compact button tw-mr-0 link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
+        <button class="ui basic small compact button tw-mr-0 tw-whitespace-nowrap link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
           {{ locale.rerun_all }}
         </button>
       </div>
@@ -386,8 +386,8 @@ export function initRepositoryActionView() {
         <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a>
         {{ run.commit.localePushedBy }}
         <a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
-        <span class="ui label" v-if="run.commit.shortSHA">
-          <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
+        <span class="ui label tw-max-w-full" v-if="run.commit.shortSHA">
+          <a class="gt-ellipsis" :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
         </span>
       </div>
     </div>
@@ -426,8 +426,8 @@ export function initRepositoryActionView() {
 
       <div class="action-view-right">
         <div class="job-info-header">
-          <div class="job-info-header-left">
-            <h3 class="job-info-header-title">
+          <div class="job-info-header-left gt-ellipsis">
+            <h3 class="job-info-header-title gt-ellipsis">
               {{ currentJob.title }}
             </h3>
             <p class="job-info-header-detail">
@@ -503,6 +503,7 @@ export function initRepositoryActionView() {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
 }
 
 .action-info-summary-title {
@@ -513,6 +514,7 @@ export function initRepositoryActionView() {
   font-size: 20px;
   margin: 0 0 0 8px;
   flex: 1;
+  overflow-wrap: anywhere;
 }
 
 .action-commit-summary {
@@ -728,6 +730,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);

From 0a080dcd37a28fd5d69a5e2eea81f442e5ff3cbc Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 13 Apr 2024 21:44:01 +0200
Subject: [PATCH 2/5] limit right side to 100px on mobile

---
 web_src/css/actions.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/web_src/css/actions.css b/web_src/css/actions.css
index bbbf29f291cbd..e661970f6b977 100644
--- a/web_src/css/actions.css
+++ b/web_src/css/actions.css
@@ -72,10 +72,8 @@
     flex-direction: column;
     align-items: flex-end;
   }
-  .run-list-item-right {
-    width: 90px;
-  }
+  .run-list-item-right,
   .run-list-ref {
-    max-width: 90px;
+    max-width: 100px;
   }
 }

From f875c3c40e72e5f7642d74f5926ca0cd83546d17 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 13 Apr 2024 21:45:27 +0200
Subject: [PATCH 3/5] 110

---
 web_src/css/actions.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/actions.css b/web_src/css/actions.css
index e661970f6b977..e1866c7736c82 100644
--- a/web_src/css/actions.css
+++ b/web_src/css/actions.css
@@ -74,6 +74,6 @@
   }
   .run-list-item-right,
   .run-list-ref {
-    max-width: 100px;
+    max-width: 110px;
   }
 }

From abbf9e367643f2f4204022972589ccab48c02128 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 13 Apr 2024 21:48:36 +0200
Subject: [PATCH 4/5] static width

---
 web_src/css/actions.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web_src/css/actions.css b/web_src/css/actions.css
index e1866c7736c82..df0f92ebf7328 100644
--- a/web_src/css/actions.css
+++ b/web_src/css/actions.css
@@ -47,6 +47,7 @@
   width: 130px;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
   gap: 3px;
   color: var(--color-text-light);
 }
@@ -60,17 +61,18 @@
 
 .run-list .flex-item-trailing {
   flex-wrap: nowrap;
+  width: 300px;
 }
 
 .run-list-ref {
   display: inline-block !important;
-  max-width: 200px;
 }
 
 @media (max-width: 767.98px) {
   .run-list .flex-item-trailing {
     flex-direction: column;
     align-items: flex-end;
+    width: auto;
   }
   .run-list-item-right,
   .run-list-ref {

From e3dd18ebd52e5c4334a6655079242b2bedaef35b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 14 Apr 2024 22:01:23 +0200
Subject: [PATCH 5/5] remove max-width and fixes

---
 web_src/css/actions.css       | 4 +++-
 web_src/css/modules/label.css | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/css/actions.css b/web_src/css/actions.css
index df0f92ebf7328..0ab09f537abce 100644
--- a/web_src/css/actions.css
+++ b/web_src/css/actions.css
@@ -61,7 +61,8 @@
 
 .run-list .flex-item-trailing {
   flex-wrap: nowrap;
-  width: 300px;
+  width: 280px;
+  flex: 0 0 280px;
 }
 
 .run-list-ref {
@@ -73,6 +74,7 @@
     flex-direction: column;
     align-items: flex-end;
     width: auto;
+    flex-basis: auto;
   }
   .run-list-item-right,
   .run-list-ref {
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 696080b66704e..2032b2c84bbb5 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -6,7 +6,6 @@
   align-items: center;
   gap: .25rem;
   min-width: 0;
-  max-width: 100%; /* since we are using "flex" to align label contents, we also need to limit the x-axis, a label shouldn't be wider than 100% */
   vertical-align: middle;
   line-height: 1;
   background: var(--color-label-bg);