style: ajusta espacamento de telas do dashboard

src/features/calendar/components/calendar-legend.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { EVENT_TYPE_STYLES } from "@/features/calendar/components/day-cell";
+import { Card } from "@/shared/components/ui/card";
 import { cn } from "@/shared/utils/ui";
 
 const LEGEND_ITEMS = [
@@ -12,22 +13,24 @@ const LEGEND_ITEMS = [
 
 export function CalendarLegend() {
 	return (
-		<ul className="flex items-center justify-start gap-2 px-1">
-			{LEGEND_ITEMS.map((item) => (
-				<li
-					key={item.label}
-					className={cn(
-						"flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium",
-						item.wrapper,
-					)}
-				>
-					<span
-						className={cn("size-1.5 shrink-0 rounded-full", item.dot)}
-						aria-hidden
-					/>
-					{item.label}
-				</li>
-			))}
-		</ul>
+		<Card className="px-4 py-2">
+			<ul className="flex flex-row items-center gap-2">
+				{LEGEND_ITEMS.map((item) => (
+					<li
+						key={item.label}
+						className={cn(
+							"flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium",
+							item.wrapper,
+						)}
+					>
+						<span
+							className={cn("size-1.5 shrink-0 rounded-full", item.dot)}
+							aria-hidden
+						/>
+						{item.label}
+					</li>
+				))}
+			</ul>
+		</Card>
 	);
 }