From fd52f8e13dd7f01747b2fe797f90167f38fd6f7a Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Thu, 22 Jan 2026 17:05:42 +0100
Subject: [PATCH] Tighten KPI card layout

---
 resources/js/admin/mobile/components/Primitives.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/resources/js/admin/mobile/components/Primitives.tsx b/resources/js/admin/mobile/components/Primitives.tsx
index 79bb816..d9714f1 100644
--- a/resources/js/admin/mobile/components/Primitives.tsx
+++ b/resources/js/admin/mobile/components/Primitives.tsx
@@ -213,7 +213,7 @@ export function KpiStrip({
   const { glassSurface, border, textStrong, textMuted, primary, surfaceMuted, surface } = useAdminTheme();
 
   return (
-    <XStack flexWrap="wrap" gap="$1.5">
+    <XStack flexWrap="wrap" gap="$2">
       {items.map((item, index) => {
         const isNeutral = item.tone === 'neutral';
         const iconColor = isNeutral ? textStrong : item.color || primary;
@@ -226,11 +226,11 @@ export function KpiStrip({
             borderRadius={14}
             borderWidth={1}
             borderColor={border}
-            padding="$2"
+            padding="$2.5"
             flexGrow={1}
-            flexBasis="28%"
-            minWidth={96}
-            maxWidth={140}
+            flexBasis="48%"
+            minWidth={150}
+            maxWidth={220}
           >
             <XStack alignItems="center" space="$1">
               <Text
@@ -264,6 +264,7 @@ export function KpiStrip({
                 >
                   {item.label}
                 </Text>
+                <Separator backgroundColor={border} opacity={0.4} width={28} alignSelf="center" />
                 {item.note ? (
                   <Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase">
                     {item.note}