ui(site): enhance table components and visibility

Refactor domain, monitor, and system tables to improve visual clarity and information density.

- Update badge and pill styles in `domains-table` and `monitors-table` to use solid background colors for better contrast.
- Integrate `ContainersTable` into `MonitorCard` and `SystemCard` to provide nested container visibility.
- Simplify `MonitorsTable` by removing the unused network view mode.
- Improve layout and spacing in various table components for better readability.

internal/site/src/components/monitors-table/monitors-table.tsx

@@ -70,9 +70,8 @@ import {
 } from "@/lib/monitors"
 import { cn, useBrowserStorage } from "@/lib/utils"
 import { AddMonitorDialog } from "./add-monitor-dialog"
-import { GroupedMonitorsTable } from "./grouped-monitors-table"
 import { Link } from "@/components/router"
-import { Network } from "lucide-react"
+import ContainersTable from "../containers-table/containers-table"
 
 // Status indicator component
 function StatusIndicator({ status }: { status: MonitorStatus }) {
@@ -187,7 +186,7 @@ function MonitorCard({
 						{getMonitorTypeLabel(monitor.type)}
 					</div>
 				</div>
-				
+
 				{/* Uptime - Prominent pill display */}
 				<div className="flex flex-col gap-2">
 					<div className="flex items-center gap-2 flex-wrap">
@@ -198,7 +197,7 @@ function MonitorCard({
 					</div>
 					<UptimeDots heartbeats={monitor.recent_heartbeats} />
 				</div>
-				
+
 				<div className="flex items-center justify-between text-sm">
 					<div className="text-xs text-muted-foreground">Response</div>
 					<div>
@@ -225,6 +224,11 @@ function MonitorCard({
 				</div>
 			)}
 
+			{/* Containers Section */}
+			<div className="pt-3 border-t">
+				<ContainersTable />
+			</div>
+
 			<div className="flex items-center gap-2 pt-2 border-t">
 				<TooltipProvider>
 					<Tooltip>
@@ -279,18 +283,18 @@ function MonitorCard({
 
 // Uptime pill badge component - big and visible
 function UptimePill({ uptime, label = "24h" }: { uptime: number; label?: string }) {
-	let colorClass = "bg-green-500/15 text-green-600 border-green-500/30"
+	let colorClass = "bg-green-500 text-white border-green-500"
 	let icon = <CheckCircleIcon className="h-3.5 w-3.5" />
-	
+
 	if (uptime < 99.9) {
-		colorClass = "bg-green-500/15 text-green-600 border-green-500/30"
+		colorClass = "bg-green-500 text-white border-green-500"
 	}
 	if (uptime < 95) {
-		colorClass = "bg-yellow-500/15 text-yellow-600 border-yellow-500/30"
+		colorClass = "bg-yellow-500 text-white border-yellow-500"
 		icon = <AlertTriangle className="h-3.5 w-3.5" />
 	}
 	if (uptime < 90) {
-		colorClass = "bg-red-500/15 text-red-600 border-red-500/30"
+		colorClass = "bg-red-500 text-white border-red-500"
 		icon = <XCircle className="h-3.5 w-3.5" />
 	}
 
@@ -298,7 +302,7 @@ function UptimePill({ uptime, label = "24h" }: { uptime: number; label?: string
 		<div className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border-2 ${colorClass}`}>
 			{icon}
 			<span className="text-sm font-bold">{formatUptime(uptime)}</span>
-			<span className="text-[10px] font-medium uppercase opacity-70">{label}</span>
+			<span className="text-[10px] font-medium uppercase opacity-90">{label}</span>
 		</div>
 	)
 }
@@ -309,10 +313,6 @@ function UptimeBar({ stats }: { stats?: Record<string, number> }) {
 	const uptime7d = stats?.uptime_7d ?? 100
 	const uptime30d = stats?.uptime_30d ?? 100
 
-	let color = "bg-green-500"
-	if (uptime24h < 95) color = "bg-yellow-500"
-	if (uptime24h < 90) color = "bg-red-500"
-
 	return (
 		<div className="flex flex-col gap-1.5">
 			<div className="flex items-center gap-2">
@@ -532,7 +532,7 @@ function MonitorRow({
 	)
 }
 
-type ViewMode = "table" | "grid" | "network"
+type ViewMode = "table" | "grid"
 type StatusFilter = "all" | MonitorStatus
 type TypeFilter = "all" | MonitorType
 
@@ -745,10 +745,6 @@ export default memo(function MonitorsTable() {
 										<LayoutGridIcon className="size-4" />
 										<Trans>Grid</Trans>
 									</DropdownMenuRadioItem>
-									<DropdownMenuRadioItem value="network" className="gap-2">
-										<Network className="size-4" />
-										<Trans>Network (Grouped)</Trans>
-									</DropdownMenuRadioItem>
 								</DropdownMenuRadioGroup>
 								<DropdownMenuSeparator />
 
@@ -807,8 +803,6 @@ export default memo(function MonitorsTable() {
 							</div>
 						)}
 					</div>
-				) : viewMode === "network" ? (
-					<GroupedMonitorsTable />
 				) : viewMode === "table" ? (
 					<Table>
 						<TableHeader>