From 745300786a2d8a4c7e19aa5c1419f664f9bd7d6f Mon Sep 17 00:00:00 2001
From: Diana Savatina <diana.savvatina@trili.tech>
Date: Wed, 26 Feb 2025 11:05:38 +0000
Subject: [PATCH] fix: Delegation tag width

---
 .../AccountCard/AccountBalanceDetails.tsx     | 57 ++++++++-----------
 1 file changed, 24 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/components/AccountCard/AccountBalanceDetails.tsx b/apps/web/src/components/AccountCard/AccountBalanceDetails.tsx
index 820e04149..238334e6d 100644
--- a/apps/web/src/components/AccountCard/AccountBalanceDetails.tsx
+++ b/apps/web/src/components/AccountCard/AccountBalanceDetails.tsx
@@ -92,52 +92,43 @@ export const AccountBalanceDetails = () => {
         </Flex>
       )}
       {delegate && (
-        <Flex
-          alignItems="center"
-          justifyContent="left"
-          gap="6px"
-          width="100%"
-          data-testid="delagated-to"
-        >
+        <Flex alignItems="center" justifyContent="left" gap="6px" data-testid="delagated-to">
           <Flex
             alignItems="center"
-            justifyContent="flex-end"
+            justifyContent="flex-start"
+            flex="0 0 107px"
             gap="2px"
+            overflow="hidden"
             background={color("greenLight")}
             borderRadius="100px"
+            whiteSpace="nowrap"
+            textOverflow="ellipsis"
             paddingX="7px"
             paddingY="3px"
-            style={{
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}
           >
             <RoundStatusDot background={color("greenDark")} />
             <Text color={color("green")} fontWeight="600" size="sm">
               Delegation
             </Text>
           </Flex>
-          <Flex>
-            <Text
-              alignItems="center"
-              overflow="hidden"
-              width="30px"
-              data-testid="delegation-to"
-              paddingY="3px"
-              size="sm"
-            >
-              To:
-            </Text>
-            <AddressPill
-              overflow="hidden"
-              maxWidth="45vw"
-              whiteSpace="nowrap"
-              textOverflow="ellipsis"
-              address={delegate}
-              data-testid="current-baker"
-            />
-          </Flex>
+          <Text
+            alignItems="center"
+            overflow="hidden"
+            width="30px"
+            data-testid="delegation-to"
+            paddingY="3px"
+            size="sm"
+          >
+            To:
+          </Text>
+          <AddressPill
+            overflow="hidden"
+            maxWidth="45vw"
+            whiteSpace="nowrap"
+            textOverflow="ellipsis"
+            address={delegate}
+            data-testid="current-baker"
+          />
         </Flex>
       )}
       {!spendableBalance.isEqualTo(totalBalance) && <Divider />}