Point fixes: badge radius, DHCP Type header, one-line Zones dates, top list headers

Badges keep the installed style's radius instead of a pill; the Leases Type column
gets its visible header; Zones dates no longer wrap; the Dashboard's top lists use
the standard panel header height; DHCP reads the clock with the list, not in render.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/screens/dashboard/Dashboard.module.css

@@ -129,9 +129,6 @@ carries two buttons.
 .panelActions { display: flex; align-items: center; gap: var(--s-3); }
 .top .panelActions { flex: none; }
 .pbAdjusted { padding: var(--s-5) var(--s-8) var(--s-7); }
-/* The lists' headers are a little shorter than a panel's: their buttons set their
-   height. */
-.lists .top > :first-child { padding-block: var(--s-2); padding-inline: var(--s-8); }
 
 /*
 A top list's row: rank, the name, the count and the row menu, and under the name

src/screens/dhcp/Leases.tsx

@@ -68,6 +68,8 @@ const KEYS: Keys<DhcpLease> = {
 
 export function Leases({ tabs, token, node = '', canModify = true, canDelete = true }: LeasesProps) {
   const [leases, setLeases] = useState<DhcpLease[] | null>(null)
+  /* When the list was read: what "expiring in 10 min" counts from. Read with the list, not in render. */
+  const [readAt, setReadAt] = useState(0)
   /*
   Whether the last load failed.
 
@@ -100,6 +102,7 @@ export function Leases({ tabs, token, node = '', canModify = true, canDelete = t
     const r = await listLeases(token, node)
     if (r.kind === 'ok') {
       setLeases(r.data)
+      setReadAt(Date.now())
       setFailure(false)
       return
     }
@@ -193,7 +196,7 @@ export function Leases({ tabs, token, node = '', canModify = true, canDelete = t
             { label: 'Scopes', value: new Set(leases.map((l) => l.scope)).size, icon: 'cache' },
             {
               label: 'Expiring in 10 min',
-              value: leases.filter((l) => l.type !== 'Reserved' && Date.parse(l.leaseExpires) - Date.now() < 600000 && Date.parse(l.leaseExpires) > Date.now()).length,
+              value: leases.filter((l) => l.type !== 'Reserved' && Date.parse(l.leaseExpires) - readAt < 600000 && Date.parse(l.leaseExpires) > readAt).length,
               icon: 'power',
             },
           ]}
@@ -238,7 +241,7 @@ export function Leases({ tabs, token, node = '', canModify = true, canDelete = t
           },
           {
             id: 'type',
-            ...head({ field: 'type', sort, onSort: toggle, name: 'Type' }),
+            ...head({ field: 'type', sort, onSort: toggle, children: 'Type' }),
             cell: (l) => (
               <Tag tone={l.type === 'Reserved' ? 'neutral' : 'ok'}>
                 {l.type}

src/screens/zones/Zones.module.css

@@ -14,7 +14,7 @@
 /* The count is `ui/count.module.css`'s: see there for why. */
 .count { composes: bar above from '../../ui/count.module.css'; }
 .countFoot { margin-top: var(--gap-group); margin-bottom: 0; }
-.mono { composes: mono from '../../ui/text.module.css'; }
+.mono { composes: mono from '../../ui/text.module.css'; white-space: nowrap; }
 
 /* Table */
 .num2 { color:var(--faint); font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

src/ui/Tag.tsx

@@ -44,7 +44,7 @@ const VARIANT: Record<TagTone, BadgeProps['variant']> = {
 
 export function Tag({ tone = 'neutral', children }: { tone?: TagTone; children: ReactNode }) {
   return (
-    <Badge variant={VARIANT[tone]} radius="full" className={tone === 'neutral' ? undefined : `tag-${tone}`}>
+    <Badge variant={VARIANT[tone]} className={tone === 'neutral' ? undefined : `tag-${tone}`}>
       {children}
     </Badge>
   )