From 813384d3dad1b95ee19bddde542c34adf1de6eb8 Mon Sep 17 00:00:00 2001
From: James Barford-Evans <james.barford-evans@arm.com>
Date: Wed, 15 Oct 2025 10:25:18 +0100
Subject: [PATCH] feat - show/hide jobs with a button

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

diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue
index 34c8b90c0..5eeed300a 100644
--- a/site/frontend/src/pages/status_new/collector.vue
+++ b/site/frontend/src/pages/status_new/collector.vue
@@ -21,6 +21,8 @@ const ACTIVE_FILTERS: Ref<Record<BenchmarkJobStatus, boolean>> = ref({
   Failed: true,
 });
 
+const showJobs: Ref<boolean> = ref(false);
+
 function filterJobByStatus(status: string) {
   ACTIVE_FILTERS.value[status] = !ACTIVE_FILTERS.value[status];
 }
@@ -76,6 +78,10 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) {
     </span>
   );
 }
+
+function toggleShowJobs() {
+  showJobs.value = !showJobs.value;
+}
 </script>
 
 <template>
@@ -116,9 +122,10 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) {
         </span>
         <span>{{ formatISODate(collector.dateAdded) }}</span>
       </div>
+      <button @click="toggleShowJobs">show jobs</button>
     </div>
 
-    <div class="table-collector-wrapper">
+    <div v-if="showJobs" class="table-collector-wrapper">
       <div class="table-collector-status-filter-wrapper">
         <div class="table-collector-status-filters">
           <strong>Filter by job status:</strong>
diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue
index 7572fafbb..3c5bf4ace 100644
--- a/site/frontend/src/pages/status_new/page.vue
+++ b/site/frontend/src/pages/status_new/page.vue
@@ -211,9 +211,7 @@ loadStatusData(loading);
 <style scoped lang="scss">
 .status-page-wrapper {
   display: flex;
-  @media screen and (max-width: 1450px) {
-    flex-direction: column;
-  }
+  flex-direction: column;
 }
 
 .collector-wrapper {