From f5699865f982399afe5e30e7a14ba7d8987aeb1d Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru444@gmail.com>
Date: Wed, 18 Mar 2026 17:45:42 -0400
Subject: [PATCH] feat(benefit_history): enhance layout of benefit history row
 with improved structure and styling

---
 .../benefit_history_row.dart                  | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_history_row.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_history_row.dart
index 6bf9601f..6edaf78b 100644
--- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_history_row.dart
+++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_history_row.dart
@@ -22,30 +22,36 @@ class BenefitHistoryRow extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: UiConstants.space2),
       child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-          // Date column
-          Text(
-            DateFormat('d MMM, yyyy').format(history.effectiveAt),
-            style: UiTypography.footnote1r.textSecondary,
+          // Left: notes + date
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                if (history.notes != null && history.notes!.isNotEmpty)
+                  Text(
+                    history.notes!,
+                    style: UiTypography.body2r,
+                  ),
+                const SizedBox(height: UiConstants.space2),
+                Text(
+                  DateFormat('d MMM, yyyy').format(history.effectiveAt),
+                  style: UiTypography.footnote1r.textSecondary,
+                ),
+              ],
+            ),
           ),
           const SizedBox(width: UiConstants.space3),
-          // Notes (takes remaining space)
-          Expanded(
-            child: history.notes != null && history.notes!.isNotEmpty
-                ? Text(
-                    history.notes!,
-                    style: UiTypography.body3r.textSecondary,
-                    overflow: TextOverflow.ellipsis,
-                    maxLines: 1,
-                  )
-                : const SizedBox.shrink(),
+          // Right: status chip + hours badge
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: <Widget>[
+              _buildStatusChip(i18n),
+              const SizedBox(height: UiConstants.space2),
+              _buildHoursBadge(i18n),
+            ],
           ),
-          const SizedBox(width: UiConstants.space2),
-          // Hours badge
-          _buildHoursBadge(i18n),
-          const SizedBox(width: UiConstants.space2),
-          // Status chip
-          _buildStatusChip(i18n),
         ],
       ),
     );
@@ -56,7 +62,7 @@ class BenefitHistoryRow extends StatelessWidget {
     final String label = '+${history.trackedHours}h';
     return Text(
       label,
-      style: UiTypography.footnote2b.copyWith(color: UiColors.textSuccess),
+      style: UiTypography.footnote1r.textSecondary,
     );
   }