# Monitoring Components - Spacing Guidelines

This document outlines the standardized spacing used across monitoring components to maximize screen real estate.

## Spacing Standards

### Page Layout
- Main container: `flex flex-col h-full space-y-4` (16px vertical gaps)
- No outer padding - handled by parent layout
- Section spacing: `space-y-4` between major sections

### Cards
- Card padding: `p-4` (16px) for main cards, `p-3` (12px) for compact cards
- Card header: `pb-3` (12px bottom padding)
- Card content spacing: `space-y-3` (12px gaps)
- Grid gaps: `gap-3` (12px) or `gap-4` (16px)

### Typography
- Page title: `text-lg font-bold mb-2`
- Section headings: `text-lg font-semibold mb-3`
- Card titles: `text-base font-semibold`
- Large values: `text-xl` or `text-lg`
- Regular text: `text-sm`
- Small text/labels: `text-xs`

### Specific Components

**ServiceCard**: `p-3` with `space-y-1.5` and `text-xs`
**DatabaseCard**: `p-4` with `space-y-2`
**SystemHealthCard**: `p-4` with `space-y-3`
**CacheStatsCard**: `p-4` with `space-y-3`
**ProxyStatsCard**: `p-4` with `space-y-3`
**QueueStatsTable**: `p-4` with `text-xs` table

### Grids
- Service grid: `gap-3`
- Database grid: `gap-3`
- Main layout grid: `gap-4`

## Benefits
- Maximizes usable screen space
- Consistent with dashboard/exchanges pages
- More data visible without scrolling
- Clean, compact appearance