fix(dashboard): center Recent Activity empty state in card

Author: Diogo-Ferraz

angular.json

@@ -49,8 +49,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1.5mb",
-                  "maximumError": "2mb"
+                  "maximumWarning": "2.3mb",
+                  "maximumError": "2.6mb"
                 },
                 {
                   "type": "anyComponentStyle",

src/app/features/dashboard/components/dashboard/dashboard.component.html

@@ -87,7 +87,9 @@
 
     <p-card [header]="isPreviewMode ? 'Recent Activity (Preview)' : 'Recent Activity (Live)'" class="dashboard-panel-card dashboard-panel-card--compact dashboard-activity-card">
       <ng-template pTemplate="content">
-        <ul class="list-none p-0 m-0 dashboard-panel-card__body--lined">
+        <ul
+          class="list-none p-0 m-0 dashboard-panel-card__body--lined dashboard-activity-list"
+          [class.dashboard-activity-list--empty]="recentActivities.length === 0">
           <li *ngFor="let activity of recentActivities; let isLast = last" class="flex align-items-center py-3" [ngClass]="{'border-bottom-1 surface-border': !isLast}">
             <div class="dashboard-activity-icon mr-3 flex-shrink-0" [ngClass]="getActivityToneClass(activity)">
               <i class="{{ activity.icon }}"></i>
@@ -97,7 +99,7 @@
               <span class="text-muted-color text-sm">{{ activity.time }}</span>
             </div>
           </li>
-          <li *ngIf="recentActivities.length === 0" class="dashboard-empty">
+          <li *ngIf="recentActivities.length === 0" class="dashboard-empty dashboard-empty--activity">
             No recent activity available.
           </li>
         </ul>

src/app/features/dashboard/components/dashboard/dashboard.component.scss

@@ -279,6 +279,12 @@ $grid-gap: 2rem;
         min-height: 100%;
     }
 
+    .dashboard-activity-list--empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     .dashboard-activity-icon {
         width: 2.45rem;
         height: 2.45rem;
@@ -330,6 +336,13 @@ $grid-gap: 2rem;
         text-align: center;
     }
 
+    .dashboard-empty--activity {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+    }
+
     @media (max-width: $md) {
         .dashboard-panel-card,
         .dashboard-panel-card--compact {