Tighten KPI card layout
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled

This commit is contained in:
Codex Agent
2026-01-22 17:05:42 +01:00
parent 8ac38cf264
commit fd52f8e13d

View File

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