Add tooltipSide prop to trend indicators to prevent overlap with balance button

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>

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">

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>

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>