From e87bb1d0c798e6ede078eacd9da717ab5fc121bb 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)
---
 .../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