From c8f944e1ac103fc4af40fbdbdaa8c226beda29a4 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru444@gmail.com>
Date: Thu, 19 Mar 2026 00:27:42 -0400
Subject: [PATCH] style(shift_header): improve layout and styling of shift
 header components

---
 .../presentation/widgets/shift_header.dart    | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/shift_header.dart b/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/shift_header.dart
index 1b11ef4d..b0a81658 100644
--- a/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/shift_header.dart
+++ b/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/shift_header.dart
@@ -86,7 +86,7 @@ class ShiftHeader extends StatelessWidget {
           children: <Widget>[
             // Row 1: status dot, title + time, badge, chevron.
             Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.center,
               children: <Widget>[
                 // Status dot.
                 Padding(
@@ -100,7 +100,7 @@ class ShiftHeader extends StatelessWidget {
                     ),
                   ),
                 ),
-                const SizedBox(width: UiConstants.space3),
+                const SizedBox(width: UiConstants.space4),
                 // Title and start time.
                 Expanded(
                   child: Column(
@@ -157,21 +157,29 @@ class ShiftHeader extends StatelessWidget {
             const SizedBox(height: UiConstants.space3),
             // Progress bar.
             ClipRRect(
-              borderRadius: UiConstants.radiusSm,
-              child: Container(
-                height: 6,
-                decoration: const BoxDecoration(
-                  color: UiColors.muted,
-                ),
-                child: FractionallySizedBox(
-                  alignment: Alignment.centerLeft,
-                  widthFactor: fillFraction,
-                  child: Container(
-                    decoration: BoxDecoration(
-                      color: statusColor,
-                      borderRadius: UiConstants.radiusSm,
+              borderRadius: UiConstants.radiusFull,
+              child: SizedBox(
+                height: 8,
+                width: double.infinity,
+                child: Stack(
+                  children: <Widget>[
+                    Container(
+                      decoration: BoxDecoration(
+                        color: UiColors.muted,
+                        borderRadius: UiConstants.radiusFull,
+                      ),
                     ),
-                  ),
+                    FractionallySizedBox(
+                      alignment: Alignment.centerLeft,
+                      widthFactor: fillFraction,
+                      child: Container(
+                        decoration: BoxDecoration(
+                          color: statusColor,
+                          borderRadius: UiConstants.radiusFull,
+                        ),
+                      ),
+                    ),
+                  ],
                 ),
               ),
             ),
@@ -181,9 +189,7 @@ class ShiftHeader extends StatelessWidget {
               '$onSiteCount ${stats.on_site} · '
               '$enRouteCount ${stats.en_route} · '
               '$lateCount ${stats.late}',
-              style: UiTypography.body3r.copyWith(
-                color: UiColors.textSecondary,
-              ),
+              style: UiTypography.body3r.textSecondary,
             ),
           ],
         ),