style: ajusta espacamento de telas do dashboard

src/app/(dashboard)/attachments/layout.tsx

@@ -19,7 +19,6 @@ export default function RootLayout({
 				subtitle="Gerencie os anexos das suas transações"
 			/>
 			<MonthNavigation />
-
 			{children}
 		</section>
 	);

src/app/(dashboard)/budgets/page.tsx

@@ -25,9 +25,7 @@ export default async function Page({ searchParams }: PageProps) {
 	const userId = await getUserId();
 	const resolvedSearchParams = searchParams ? await searchParams : undefined;
 	const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
-
 	const { period: selectedPeriod } = parsePeriodParam(periodoParam);
-
 	const { budgets, categoriesOptions } = await fetchBudgetsForUser(
 		userId,
 		selectedPeriod,

src/app/(dashboard)/calendar/page.tsx

@@ -36,7 +36,7 @@ export default async function Page({ searchParams }: PageProps) {
 	};
 
 	return (
-		<main className="flex flex-col gap-3">
+		<main className="flex flex-col gap-4">
 			<MonthNavigation />
 			<MonthlyCalendar
 				period={calendarPeriod}

src/app/(dashboard)/cards/page.tsx

@@ -10,7 +10,7 @@ export default async function Page() {
 		await fetchAllCardsForUser(userId);
 
 	return (
-		<main className="flex flex-col items-start gap-6">
+		<main className="flex flex-col gap-6">
 			<CardsPage
 				cards={activeCards}
 				archivedCards={archivedCards}

src/app/(dashboard)/categories/page.tsx

@@ -9,7 +9,7 @@ export default async function Page() {
 	const categories = await fetchCategoriesForUser(userId);
 
 	return (
-		<main className="flex flex-col items-start gap-6">
+		<main className="flex flex-col gap-6">
 			<CategoriesPage categories={categories} />
 		</main>
 	);

src/app/(dashboard)/inbox/page.tsx

@@ -56,7 +56,7 @@ export default async function Page({ searchParams }: PageProps) {
 	const normalizedSourceApps = Array.isArray(sourceApps) ? sourceApps : [];
 
 	return (
-		<main className="flex flex-col items-start gap-6">
+		<main className="flex flex-col gap-6">
 			<InboxPage
 				activeStatus={activeStatus}
 				activeApp={activeApp}

src/app/(dashboard)/notes/page.tsx

@@ -9,7 +9,7 @@ export default async function Page() {
 	const { activeNotes, archivedNotes } = await fetchAllNotesForUser(userId);
 
 	return (
-		<main className="flex flex-col items-start gap-6">
+		<main className="flex flex-col gap-6">
 			<NotesPage notes={activeNotes} archivedNotes={archivedNotes} />
 		</main>
 	);

src/app/(dashboard)/payers/page.tsx

@@ -9,7 +9,7 @@ export default async function Page() {
 	const { payers, avatarOptions } = await fetchPayersForUser(userId);
 
 	return (
-		<main className="flex flex-col items-start gap-6">
+		<main className="flex flex-col gap-6">
 			<PayersPage payers={payers} avatarOptions={avatarOptions} />
 		</main>
 	);

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>
 	);
 }

src/features/dashboard/components/bills/bill-list-item.tsx

@@ -44,7 +44,7 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 
 	return (
 		<li className="flex items-center justify-between transition-all duration-300 py-1.5">
-			<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
+			<div className="flex min-w-0 flex-1 items-center gap-2 py-0.5">
 				<EstablishmentLogo name={bill.name} size={37} />
 
 				<div className="min-w-0">