feat(quota): add subtle dividers between quota entries in compact card

Author: mcowger

packages/frontend/src/components/quota/CompactQuotasCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { clsx } from 'clsx';
 import { useNavigate } from 'react-router-dom';
 import { AlertTriangle } from 'lucide-react';
 import type { QuotaCheckerInfo, Meter } from '../../types/quota';
@@ -31,13 +32,20 @@ export const CompactQuotasCard: React.FC<CompactQuotasCardProps> = ({ allowanceQ
         }
       }}
     >
-      {allowanceQuotas.map((quota) => {
+      {allowanceQuotas.map((quota, idx) => {
         const displayName = getCheckerDisplayName(quota.checkerType, quota.checkerId);
         const allowanceMeters = getAllowanceMeters(quota.meters);
+        const isLast = idx === allowanceQuotas.length - 1;
 
         if (!quota.success) {
           return (
-            <div key={quota.checkerId} className="flex items-center gap-2 min-w-0 py-0.5">
+            <div
+              key={quota.checkerId}
+              className={clsx(
+                'flex items-center gap-2 min-w-0 py-0.5',
+                !isLast && 'border-b border-border/40'
+              )}
+            >
               <span className="text-[11px] text-text-secondary truncate flex-1">{displayName}</span>
               <AlertTriangle className="w-3 h-3 text-danger flex-shrink-0" />
             </div>
@@ -46,7 +54,13 @@ export const CompactQuotasCard: React.FC<CompactQuotasCardProps> = ({ allowanceQ
 
         if (allowanceMeters.length === 0) {
           return (
-            <div key={quota.checkerId} className="flex items-center gap-2 min-w-0 py-0.5">
+            <div
+              key={quota.checkerId}
+              className={clsx(
+                'flex items-center gap-2 min-w-0 py-0.5',
+                !isLast && 'border-b border-border/40'
+              )}
+            >
               <span className="text-[11px] text-text-secondary truncate flex-1">{displayName}</span>
               <span className="text-[11px] text-text-muted">—</span>
             </div>
@@ -55,7 +69,10 @@ export const CompactQuotasCard: React.FC<CompactQuotasCardProps> = ({ allowanceQ
 
         // Show the service name once, then stack all allowance meters below it
         return (
-          <div key={quota.checkerId} className="py-0.5">
+          <div
+            key={quota.checkerId}
+            className={clsx('py-0.5', !isLast && 'border-b border-border/40')}
+          >
             <span className="text-[11px] text-text-muted pl-0 block truncate mb-0.5">
               {displayName}
             </span>