feat(dashboard): default DataList.Row to vertical center alignment

- Set DataList.Row align default to center (items-center)
- Use align="start" on monitors, goals, and anomalies for multi-line rows
- Remove redundant align props from funnels and flags
- Document default in design-system.mdc

Author: izadoesdev

.cursor/rules/design-system.mdc

@@ -28,7 +28,7 @@ This file is **intentionally small**. It grows as we lock patterns. **Interactio
 
 All list views use the `DataList` compound component (`components/data-list.tsx`). Wrap in `<DataList className="rounded bg-card">` — no border on root.
 
-- **Row defaults:** `align="start"` for wrapping text, `align="center"` for single-line rows (e.g. flags). `w-full` is built-in — don't repeat it.
+- **Row defaults:** `DataList.Row` defaults to `align="center"` (vertical center). Use `align="start"` when multi-line text should stay top-aligned (monitors, goals, anomalies). `w-full` is built-in — don't repeat it.
 - **Cell defaults:** `shrink-0` and `min-w-0` are built-in — don't repeat them. `text-start` is the browser default — don't add it.
 - **Inactive/paused state:** `opacity-50` on the Row, not a badge.
 - **`pt-0.5`** on non-text cells (icons, stats, actions) to align with text baseline in `items-start` rows. Omit in `items-center` rows.

apps/dashboard/app/(main)/websites/[id]/anomalies/_components/anomaly-item.tsx

@@ -86,7 +86,7 @@ export function AnomalyItem({ anomaly }: AnomalyItemProps) {
 		anomaly.type === "spike" ? "text-destructive" : "text-blue-500";
 
 	return (
-		<DataList.Row>
+		<DataList.Row align="start">
 			<DataList.Cell className="pt-0.5">
 				<div
 					className={cn(

apps/dashboard/app/(main)/websites/[id]/flags/_components/flags-list.tsx

@@ -297,7 +297,6 @@ function FlagRow({
 
 	return (
 		<DataList.Row
-			align="center"
 			asChild
 			className={cn("min-w-full", flag.status === "archived" && "opacity-50")}
 		>

apps/dashboard/app/(main)/websites/[id]/funnels/_components/funnel-item.tsx

@@ -144,33 +144,39 @@ export function FunnelItem({
 					tabIndex={0}
 					type="button"
 				>
-					<DataList.Cell className="w-8 pt-0.5">
-						<CaretRightIcon
+					<DataList.Cell>
+						<div
 							className={cn(
-								"size-4 text-muted-foreground transition-transform duration-200",
-								isExpanded && "rotate-90"
+								"flex size-8 shrink-0 items-center justify-center rounded border transition-colors",
+								isExpanded
+									? "border-border bg-accent/40 text-foreground"
+									: "border-transparent bg-muted text-muted-foreground"
 							)}
-							weight="fill"
-						/>
+						>
+							<CaretRightIcon
+								className={cn(
+									"size-4 transition-transform duration-200",
+									isExpanded && "rotate-90"
+								)}
+								weight="fill"
+							/>
+						</div>
 					</DataList.Cell>
 
-					<DataList.Cell className="w-40 min-w-0 lg:w-52">
-						<p className="wrap-break-word text-pretty font-medium text-foreground text-sm">
-							{funnel.name}
-						</p>
-					</DataList.Cell>
-
-					<DataList.Cell grow>
-						{funnel.description ? (
-							<p className="wrap-break-word text-pretty text-muted-foreground text-xs">
-								{funnel.description}
+					<DataList.Cell className="min-w-0" grow>
+						<div className="w-full text-start">
+							<p className="wrap-break-word text-pretty font-medium text-foreground text-sm">
+								{funnel.name}
 							</p>
-						) : (
-							<p className="text-muted-foreground text-xs">—</p>
-						)}
+							{funnel.description ? (
+								<p className="wrap-break-word mt-1 text-pretty text-muted-foreground text-xs">
+									{funnel.description}
+								</p>
+							) : null}
+						</div>
 					</DataList.Cell>
 
-					<DataList.Cell className="hidden items-start gap-3 pt-0.5 lg:flex">
+					<DataList.Cell className="hidden items-center gap-3 lg:flex">
 						{isLoadingAnalytics ? (
 							<>
 								<Skeleton className="h-5 w-32 rounded lg:w-44" />
@@ -204,7 +210,7 @@ export function FunnelItem({
 						)}
 					</DataList.Cell>
 
-					<DataList.Cell className="w-14 pt-0.5 text-right lg:hidden">
+					<DataList.Cell className="w-14 text-right lg:hidden">
 						{isLoadingAnalytics ? (
 							<Skeleton className="ms-auto h-4 w-12 rounded" />
 						) : (
@@ -214,7 +220,7 @@ export function FunnelItem({
 						)}
 					</DataList.Cell>
 
-					<DataList.Cell action className="pt-0.5">
+					<DataList.Cell action>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<Button
@@ -264,10 +270,10 @@ export function FunnelItem({
 
 export function FunnelItemSkeleton() {
 	return (
-		<div className="flex h-15 items-center gap-4 border-border/80 border-b px-4 last:border-b-0">
-			<Skeleton className="size-4 shrink-0 rounded" />
+		<div className="flex h-15 items-center gap-4 border-border/80 border-b px-4 py-3 last:border-b-0">
+			<Skeleton className="size-8 shrink-0 rounded" />
 			<div className="min-w-0 flex-1 space-y-1.5">
-				<Skeleton className="h-4 w-36" />
+				<Skeleton className="h-4 w-36 max-w-full" />
 				<Skeleton className="h-3 w-48 max-w-full" />
 			</div>
 			<div className="hidden shrink-0 items-center gap-3 lg:flex">

apps/dashboard/app/(main)/websites/[id]/goals/_components/goal-item.tsx

@@ -87,7 +87,7 @@ export function GoalItem({
 	const TypeIcon = config.icon;
 
 	return (
-		<DataList.Row className={cn(!goal.isActive && "opacity-50")}>
+		<DataList.Row align="start" className={cn(!goal.isActive && "opacity-50")}>
 			<DataList.Cell className="pt-0.5">
 				<div
 					className={cn(

apps/dashboard/components/data-list.tsx

@@ -60,7 +60,7 @@ interface DataListRowProps {
 }
 
 function DataListRow({
-	align = "start",
+	align = "center",
 	asChild = false,
 	children,
 	className,

apps/dashboard/components/monitors/monitor-row.tsx

@@ -309,7 +309,11 @@ export function MonitorRow({
 	};
 
 	return (
-		<DataList.Row asChild className={cn(!isActive && "opacity-50")}>
+		<DataList.Row
+			align="start"
+			asChild
+			className={cn(!isActive && "opacity-50")}
+		>
 			<Link href={`/monitors/${schedule.id}`} onClick={handleClick}>
 				<DataList.Cell className="pt-0.5">
 					<div