From 905bd64a582f3095ad4e495447cebc3ebbfd0709 Mon Sep 17 00:00:00 2001
From: James Barford-Evans <james.barford-evans@arm.com>
Date: Tue, 7 Oct 2025 11:04:07 +0100
Subject: [PATCH 1/2] Fix; 12 chars for a tag and a more responsive collectors
 grid

---
 site/frontend/src/pages/status_new/collector.vue | 2 +-
 site/frontend/src/pages/status_new/page.vue      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue
index a260fb30b..af78f53b8 100644
--- a/site/frontend/src/pages/status_new/collector.vue
+++ b/site/frontend/src/pages/status_new/collector.vue
@@ -149,7 +149,7 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) {
           <template v-for="job in collector.jobs">
             <tr v-if="ACTIVE_FILTERS[job.status]">
               <td class="table-cell-padding">
-                {{ job.requestTag }}
+                {{ job.requestTag.slice(0, 12) }}
               </td>
               <td class="table-cell-padding">
                 {{ formatJobStatus(job.status) }}
diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue
index 7d7b77e01..7c7c4e1c2 100644
--- a/site/frontend/src/pages/status_new/page.vue
+++ b/site/frontend/src/pages/status_new/page.vue
@@ -150,7 +150,7 @@ loadStatusData(loading);
                 <td><PullRequestLink :request="req" /></td>
                 <td>{{ req.requestType }}</td>
                 <td>
-                  {{ req.tag }}
+                  {{ req.tag.slice(0, 12) }}
                 </td>
                 <td>
                   {{ formatStatus(req.status)
@@ -324,7 +324,7 @@ loadStatusData(loading);
 .collectors-grid {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(500px, 100%));
   gap: 20px;
 }
 </style>

From bbb51d477f4c10d9bbce007db761f54415cb3d8b Mon Sep 17 00:00:00 2001
From: James Barford-Evans <james.barford-evans@arm.com>
Date: Tue, 7 Oct 2025 11:37:50 +0100
Subject: [PATCH 2/2] PR Feedback; create a tag shortening function

---
 site/frontend/src/pages/status_new/collector.vue | 4 ++--
 site/frontend/src/pages/status_new/page.vue      | 8 ++++++--
 site/frontend/src/utils/formatting.ts            | 8 ++++++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue
index af78f53b8..7836d0c94 100644
--- a/site/frontend/src/pages/status_new/collector.vue
+++ b/site/frontend/src/pages/status_new/collector.vue
@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import {h, ref, Ref} from "vue";
 import {parseISO, differenceInHours} from "date-fns";
-import {formatISODate} from "../../utils/formatting";
+import {formatISODate, shortenTag} from "../../utils/formatting";
 import {CollectorConfig, BenchmarkJobStatus} from "./data";
 
 const props = defineProps<{
@@ -149,7 +149,7 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) {
           <template v-for="job in collector.jobs">
             <tr v-if="ACTIVE_FILTERS[job.status]">
               <td class="table-cell-padding">
-                {{ job.requestTag.slice(0, 12) }}
+                {{ shortenTag(job.requestTag) }}
               </td>
               <td class="table-cell-padding">
                 {{ formatJobStatus(job.status) }}
diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue
index 7c7c4e1c2..7572fafbb 100644
--- a/site/frontend/src/pages/status_new/page.vue
+++ b/site/frontend/src/pages/status_new/page.vue
@@ -4,7 +4,11 @@ import {h, ref, Ref} from "vue";
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_NEW_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
-import {formatSecondsAsDuration, formatISODate} from "../../utils/formatting";
+import {
+  formatSecondsAsDuration,
+  formatISODate,
+  shortenTag,
+} from "../../utils/formatting";
 import {useExpandedStore} from "../../utils/expansion";
 import {
   BenchmarkRequest,
@@ -150,7 +154,7 @@ loadStatusData(loading);
                 <td><PullRequestLink :request="req" /></td>
                 <td>{{ req.requestType }}</td>
                 <td>
-                  {{ req.tag.slice(0, 12) }}
+                  {{ shortenTag(req.tag) }}
                 </td>
                 <td>
                   {{ formatStatus(req.status)
diff --git a/site/frontend/src/utils/formatting.ts b/site/frontend/src/utils/formatting.ts
index d0b91c292..7f32e4eb6 100644
--- a/site/frontend/src/utils/formatting.ts
+++ b/site/frontend/src/utils/formatting.ts
@@ -27,3 +27,11 @@ export function formatISODate(dateString?: string): string {
   }
   return "";
 }
+
+// Shorten a tag, only commit shas will be truncated
+export function shortenTag(tag: string): string {
+  if (tag.length < 40) {
+    return tag;
+  }
+  return tag.slice(0, 12);
+}