From 5f2f418603d8ef8968ad4d3da767fed9d892f4b7 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 15 Dec 2025 17:45:55 +0000
Subject: [PATCH 1/2] Dashboard events table: save items per page in local
 storage

---
 src/views/Dashboard.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index a502689c5..342904bc2 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :items="workflowsTable"
           :loading="isLoading"
           id="dashboard-workflows"
-          items-per-page="-1"
+          :items-per-page="-1"
           style="font-size: 1rem;"
           density="compact"
         >
@@ -43,7 +43,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-data-table
           :headers="$options.eventsHeader"
           :items="events"
-          :items-per-page="8"
+          v-model:items-per-page="eventsItemsPerPage"
+          :items-per-page-options="eventsItemsPerPageOptions"
           density="compact"
           data-cy="events-table"
         >
@@ -185,6 +186,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+import { useLocalStorage } from '@vueuse/core'
 import {
   mdiBook,
   mdiBookMultiple,
@@ -249,6 +251,22 @@ export default {
     EventChip,
   },
 
+  setup () {
+    const eventsItemsPerPage = useLocalStorage('dashboardEventsItemsPerPage', 8)
+    const eventsItemsPerPageOptions = [
+      { value: 5, title: '5' },
+      { value: 8, title: '8' },
+      { value: 10, title: '10' },
+      { value: 20, title: '20' },
+      { value: -1, title: 'All' },
+    ]
+
+    return {
+      eventsItemsPerPage,
+      eventsItemsPerPageOptions,
+    }
+  },
+
   data () {
     return {
       query: new SubscriptionQuery(

From 2660ae43bfd24e62ce96bee251937326e92b96f1 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 15 Dec 2025 17:50:36 +0000
Subject: [PATCH 2/2] Truncate messages in warning triangle tooltip and
 dashboard events table

---
 src/components/cylc/WarningIcon.vue | 10 +++++++++-
 src/styles/_util.scss               |  9 +++++++++
 src/views/Dashboard.vue             | 23 ++++++++++++++++++-----
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/cylc/WarningIcon.vue b/src/components/cylc/WarningIcon.vue
index 8f24bec9d..c61f67e8f 100644
--- a/src/components/cylc/WarningIcon.vue
+++ b/src/components/cylc/WarningIcon.vue
@@ -65,7 +65,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <td style="padding-right: 0.5em; vertical-align: top;">
             <EventChip :level="event.level" />
           </td><td>
-            <span>{{ event.message }}</span>
+            <span class="truncated-message">{{ event.message }}</span>
           </td>
         </tr>
       </table>
@@ -134,3 +134,11 @@ export default {
   path: PATH,
 }
 </script>
+
+<style lang="scss" scoped>
+@use "/src/styles/util";
+
+.truncated-message {
+  @include util.line-clamp(2);
+}
+</style>
diff --git a/src/styles/_util.scss b/src/styles/_util.scss
index 22326661d..5b9328458 100644
--- a/src/styles/_util.scss
+++ b/src/styles/_util.scss
@@ -28,3 +28,12 @@
     }
   }
 }
+
+@mixin line-clamp($lines) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  line-clamp: $lines;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 342904bc2..78ee8620a 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -49,19 +49,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-cy="events-table"
         >
           <!-- Hide header: -->
-          <template v-slot:headers></template>
+          <template #headers></template>
 
           <!-- Hide footer if no events: -->
-          <template v-if="!events.length" v-slot:bottom></template>
+          <template v-if="!events.length" #bottom></template>
 
           <!-- Special template if there are no events to display -->
-          <template v-slot:no-data>
-            <td class="text-h6 text-disabled">No events</td>
+          <template #no-data>
+            <span class="text-h6 text-disabled">No events</span>
           </template>
 
-          <template v-slot:item.level="{ item }">
+          <template #item.level="{ item }">
             <EventChip :level="item.level" />
           </template>
+          <template #item.message="{ item }">
+            <div class="truncated-message py-1">
+              {{ item.message }}
+            </div>
+          </template>
         </v-data-table>
       </v-col>
     </v-row>
@@ -342,3 +347,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+@use "/src/styles/util";
+
+.truncated-message {
+  @include util.line-clamp(4);
+}
+</style>