fix(earn): fix wrapping and alignments on pool info screen (#6143)

### Description https://linear.app/valora/issue/ACT-1407/earn-pool-info-screen-ui-improvement https://github.com/user-attachments/assets/2dd38a0d-a9b9-4f10-beb0-6d10cc310b0f | Before |After | | --- | --- | | <img src="https://github.com/user-attachments/assets/1084f9f7-83d3-4fff-82cc-5df345e8f19b" width="250px"> | <img src="https://github.com/user-attachments/assets/2dd38a0d-a9b9-4f10-beb0-6d10cc310b0f" width="250px"> | ### Test plan tested manually
valora-inc · Oct 10, 2024 · aa2fe7d · aa2fe7d
1 parent edf6d3b
commit aa2fe7d
Showing 1 changed file with 14 additions and 13 deletions.
diff --git a/src/earn/EarnPoolInfoScreen.tsx b/src/earn/EarnPoolInfoScreen.tsx
@@ -298,14 +298,16 @@ function YieldCard({
           return (
             <View style={styles.cardLineContainer} key={index}>
               <View style={styles.cardLineLabel}>
-                <Text numberOfLines={1} style={styles.cardLabelText}>
-                  {rate.label}
-                </Text>
-                <TokenIcons
-                  tokensInfo={tokenInfo}
-                  size={IconSize.XXSMALL}
-                  showNetworkIcon={false}
-                />
+                <View style={styles.yieldRateLabelContainer}>
+                  <Text numberOfLines={1} style={styles.cardLabelText}>
+                    {rate.label}
+                  </Text>
+                  <TokenIcons
+                    tokensInfo={tokenInfo}
+                    size={IconSize.XXSMALL}
+                    showNetworkIcon={false}
+                  />
+                </View>
               </View>
               <Text style={styles.cardLabelText}>
                 {t('earnFlow.poolInfoScreen.ratePercent', { rate: rate.percentage.toFixed(2) })}
@@ -757,6 +759,7 @@ const styles = StyleSheet.create({
   tokenIconsContainer: {
     flex: 1,
     flexDirection: 'row',
+    alignItems: 'center',
   },
   contentContainer: {
     gap: Spacing.Regular16,
@@ -772,15 +775,13 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
   },
   cardLineLabel: {
-    flex: 1,
+    paddingRight: 20, // Prevents Icon from being cut off on long labels
+  },
+  yieldRateLabelContainer: {
     flexDirection: 'row',
     gap: Spacing.Tiny4,
-    alignItems: 'center',
-    paddingRight: 20, // Prevents Icon from being cut off on long labels
-    minWidth: '35%',
   },
   cardTitleText: {
     ...typeScale.labelSemiBoldMedium,