chore: prepara versao 2.7.7

src/features/dashboard/components/widgets/category-trends-widget.tsx

@@ -7,6 +7,7 @@ import {
 	RiLineChartLine,
 } from "@remixicon/react";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
@@ -45,17 +46,15 @@ export function CategoryTrendsWidget({
 
 				return (
 					<li key={category.categoryId}>
-						<div className="-mx-2 flex items-center gap-3 rounded-md p-2">
+						<div className={styles.row}>
 							<CategoryIconBadge
 								icon={category.categoryIcon}
 								name={category.categoryName}
 								size="md"
 							/>
-							<div className="min-w-0 flex-1">
-								<p className="truncate text-sm font-medium text-foreground">
-									{category.categoryName}
-								</p>
-								<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+							<div className={styles.textStack}>
+								<p className={styles.title}>{category.categoryName}</p>
+								<p className={styles.meta}>
 									<span
 										className="inline-flex items-center gap-1"
 										title="Mês anterior"
@@ -81,7 +80,9 @@ export function CategoryTrendsWidget({
 									</span>
 								</p>
 							</div>
-							<span className="flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
+							<span
+								className={`${styles.trailingMeta} min-w-[5.75rem] justify-end text-muted-foreground`}
+							>
 								<PercentageChangeIndicator
 									value={change}
 									label={formatPercentage(change, {