store user login

src/components/KpiCard.tsx

@@ -25,6 +25,15 @@ export interface KpiCardProps {
   note?: string;
   tone?: KpiTone;
   icon?: ReactNode;
+  /**
+   * Accepted and ignored.
+   *
+   * The underline bar this used to drive was removed from the tile. Six call
+   * sites still pass it, so the prop stays declared to keep them compiling —
+   * it is not read. Either drop it from the callers or restore the bar; right
+   * now it is neither, and this comment is here so that is visible.
+   */
+  fill?: number;
 }
 
 /**
@@ -39,17 +48,47 @@ export function KpiCard({ label, value, note, tone = 'neutral', icon }: KpiCardP
 
   return (
     <Card padding={0} elevation="low">
-      <VStack gap={1} padding={2} style={{ position: 'relative', paddingBottom: 12, minHeight: 108 }}>
-        <HStack justify="between" align="start" gap={1}>
-          <Text
-            type="label"
-            size="xsm"
-            color="secondary"
-            style={{ textTransform: 'uppercase', letterSpacing: '0.09em', lineHeight: 1.35 }}
-          >
-            {label}
-          </Text>
-          {icon ? <span style={{ color, display: 'flex' }}>{icon}</span> : null}
+      <VStack gap={1} padding={2} style={{ minHeight: 108 }}>
+        {/* Icon first, then the label; the pill sits opposite it. Both are
+            fixed to this row so tiles line up whether or not they carry one. */}
+        {/* A fixed height, so a label that wraps to two lines (a long note
+            squeezes it) does not push that tile's value below its neighbours'. */}
+        <HStack justify="between" align="center" gap={1} style={{ minHeight: 32 }}>
+          <HStack gap={1} align="center" style={{ minWidth: 0 }}>
+            {icon ? (
+              <span style={{ color, display: 'flex', flex: 'none' }} aria-hidden>
+                {icon}
+              </span>
+            ) : null}
+            <Text
+              type="label"
+              size="xsm"
+              color="secondary"
+              style={{ textTransform: 'uppercase', letterSpacing: '0.09em', lineHeight: 1.35 }}
+            >
+              {label}
+            </Text>
+          </HStack>
+
+          {note ? (
+            <span
+              style={{
+                flex: 'none',
+                maxWidth: '58%',
+                background: 'var(--color-slate-100)',
+                color: 'var(--color-slate-500)',
+                borderRadius: 12,
+                padding: '2px 8px',
+                fontSize: 10.5,
+                fontWeight: 500,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {note}
+            </span>
+          ) : null}
         </HStack>
 
         <HStack justify="center" align="center" style={{ flex: 1 }}>
@@ -61,24 +100,6 @@ export function KpiCard({ label, value, note, tone = 'neutral', icon }: KpiCardP
             {value}
           </Text>
         </HStack>
-
-        {note ? (
-          <span
-            style={{
-              position: 'absolute',
-              bottom: 12,
-              left: 16,
-              background: 'var(--color-slate-100)',
-              color: 'var(--color-slate-500)',
-              borderRadius: 12,
-              padding: '2px 6px',
-              fontSize: 10.5,
-              fontWeight: 500,
-            }}
-          >
-            {note}
-          </span>
-        ) : null}
       </VStack>
 
     </Card>