From 6b2ccb6f7c656f348c2ad36150f2770f8197e7c5 Mon Sep 17 00:00:00 2001
From: Anastasios <anastas3993@gmail.com>
Date: Wed, 25 Dec 2024 16:17:05 +0400
Subject: [PATCH] fix: avaliable balance tooltip

---
 src/app/ui/components/account/account.card.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx
index 18ea852a89..6ce1a31eaa 100644
--- a/src/app/ui/components/account/account.card.tsx
+++ b/src/app/ui/components/account/account.card.tsx
@@ -13,6 +13,7 @@ import {
   shimmerStyles,
 } from '@leather.io/ui';
 
+import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { useScaleText } from '@app/common/hooks/use-scale-text';
 import { AccountNameLayout } from '@app/components/account/account-name';
 import { PrivateTextLayout } from '@app/components/privacy/private-text.layout';
@@ -45,6 +46,8 @@ export function AccountCard({
   isBalancePrivate,
 }: AccountCardProps) {
   const scaleTextRef = useScaleText();
+  const isAtLeastMd = useViewportMinWidth('md');
+  const tooltipSide = isAtLeastMd ? 'right' : 'bottom';
 
   return (
     <Flex
@@ -107,7 +110,7 @@ export function AccountCard({
               Available balance:
               <styled.span ml="space.01">
                 <BasicTooltip
-                  side="right"
+                  side={tooltipSide}
                   label="Some funds may be unavailable to protect your collectible assets. Disable protection to access your remaining balance."
                 >
                   <Flag