From 8e10f9165338a76e95130c6af6f704860b9e6650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Wed, 10 Dec 2025 13:11:22 +0100
Subject: [PATCH] Add tooltipSide prop to trend indicators to prevent overlap
 with balance button

---
 resources/js/components/accounts/account-list-card.tsx        | 1 +
 resources/js/components/dashboard/account-balance-card.tsx    | 1 +
 resources/js/components/dashboard/amount-trend-indicator.tsx  | 4 +++-
 .../js/components/dashboard/percentage-trend-indicator.tsx    | 4 +++-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/accounts/account-list-card.tsx b/resources/js/components/accounts/account-list-card.tsx
index 6bcd07de..fd01b284 100644
--- a/resources/js/components/accounts/account-list-card.tsx
+++ b/resources/js/components/accounts/account-list-card.tsx
@@ -113,6 +113,7 @@ export function AccountListCard({
                                 className="text-sm"
                                 previousAmount={account.previousBalance}
                                 currentAmount={account.currentBalance}
+                                tooltipSide="bottom"
                             />
                         </div>
                     </div>
diff --git a/resources/js/components/dashboard/account-balance-card.tsx b/resources/js/components/dashboard/account-balance-card.tsx
index 0a707e16..063ff263 100644
--- a/resources/js/components/dashboard/account-balance-card.tsx
+++ b/resources/js/components/dashboard/account-balance-card.tsx
@@ -92,6 +92,7 @@ export function AccountBalanceCard({
                             className="text-sm"
                             previousAmount={account.previousBalance}
                             currentAmount={account.currentBalance}
+                            tooltipSide="bottom"
                         />
                     </div>
                     <div className="h-[70px] w-full max-w-[250px] flex-1">
diff --git a/resources/js/components/dashboard/amount-trend-indicator.tsx b/resources/js/components/dashboard/amount-trend-indicator.tsx
index 874a1d85..0a135348 100644
--- a/resources/js/components/dashboard/amount-trend-indicator.tsx
+++ b/resources/js/components/dashboard/amount-trend-indicator.tsx
@@ -14,6 +14,7 @@ interface AmountTrendIndicatorProps {
     className?: string;
     previousAmount?: number;
     currentAmount?: number;
+    tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
 }
 
 function calculatePercentageChange(
@@ -31,6 +32,7 @@ export function AmountTrendIndicator({
     className = '',
     previousAmount,
     currentAmount,
+    tooltipSide = 'top',
 }: AmountTrendIndicatorProps) {
     const [open, setOpen] = useState(false);
 
@@ -71,7 +73,7 @@ export function AmountTrendIndicator({
                         {content}
                     </div>
                 </TooltipTrigger>
-                <TooltipContent>
+                <TooltipContent side={tooltipSide}>
                     {percentageChange >= 0 ? '+' : ''}
                     {percentageChange.toFixed(1)}% {label}
                 </TooltipContent>
diff --git a/resources/js/components/dashboard/percentage-trend-indicator.tsx b/resources/js/components/dashboard/percentage-trend-indicator.tsx
index 0f0c0106..660b24fd 100644
--- a/resources/js/components/dashboard/percentage-trend-indicator.tsx
+++ b/resources/js/components/dashboard/percentage-trend-indicator.tsx
@@ -15,6 +15,7 @@ interface PercentageTrendIndicatorProps {
     currencyCode?: string;
     invertColors?: boolean;
     className?: string;
+    tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
 }
 
 function formatCurrency(amount: number, currencyCode: string): string {
@@ -34,6 +35,7 @@ export function PercentageTrendIndicator({
     currencyCode = 'USD',
     invertColors = false,
     className,
+    tooltipSide = 'top',
 }: PercentageTrendIndicatorProps) {
     const [open, setOpen] = useState(false);
 
@@ -79,7 +81,7 @@ export function PercentageTrendIndicator({
                         {content}
                     </div>
                 </TooltipTrigger>
-                <TooltipContent>
+                <TooltipContent side={tooltipSide}>
                     {amountDiff >= 0 ? '+' : '-'}
                     {formattedDiff} {label}
                 </TooltipContent>