From 39242fa565c43fc5e2260447ce6314ecbdac2f76 Mon Sep 17 00:00:00 2001
From: Debora Crescenzo <dcrescenzo@sipwise.com>
Date: Wed, 5 Feb 2025 08:21:04 +0000
Subject: [PATCH] MT#62070 Fix Dashboard Containers Overflow Issue

Resolved an issue where item lists on the
dashboard would overflow the container borders
when containing many items. The updated logic
limits the visible items to the 5 most recent,
ensuring proper layout and improved UI
consistency.

Change-Id: I50ee8ed9e5b8d68abc77ae17ca4273320d2c6daa
(cherry picked from commit 1b70f20ee2785445037971316be6ef03fcdc3cb9)
(cherry picked from commit bbf0c474b8f3942ea830b27c9e05d9abc8e0ce1c)
---
 .../pages/Dashboard/CscCardDashboard.vue          | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/Dashboard/CscCardDashboard.vue b/src/components/pages/Dashboard/CscCardDashboard.vue
index 711bc185..58513fb5 100644
--- a/src/components/pages/Dashboard/CscCardDashboard.vue
+++ b/src/components/pages/Dashboard/CscCardDashboard.vue
@@ -52,7 +52,7 @@
             class="csc-card-list"
         >
             <q-list
-                v-for="(item, index) in itemsList"
+                v-for="(item, index) in shortItemsList"
                 :key="item.id"
             >
                 <template v-if="useSlot">
@@ -95,12 +95,12 @@
                     </q-item>
                 </template>
                 <q-separator
-                    v-if="index !== itemsList.length-1"
+                    v-if="index !== shortItemsList.length-1"
                     spaced
                 />
             </q-list>
             <div
-                v-if="!loading && itemsList.length === 0"
+                v-if="!loading && shortItemsList.length === 0"
                 class="text-center"
             >
                 {{ error ? $t('Data loading error') : noItemsMessage }}
@@ -185,7 +185,12 @@ export default {
             default: false
         }
     },
-    emits: ['action']
+    emits: ['action'],
+    computed: {
+        shortItemsList () {
+            return this.itemsList.length >= 5 ? this.itemsList.slice(0, 5) : this.itemsList
+        }
+    }
 }
 </script>
 
@@ -201,7 +206,7 @@ export default {
     padding-bottom: 22px
 
 .csc-card-list
-    height: 400px
+    height:  450px
 
 .csc-card-footer
     height: 80px