feat(earn-info): keep token icon and name on the same line (#6222)

### Description

Slight layout adjustment to keep the token icon and name on the same
line.

| iOS | Android |
| ----- | ----- | 
|
![](https://github.com/user-attachments/assets/9c481c67-18b5-4eb2-9ce2-8a19b71e2366
"iOS") |
![](https://github.com/user-attachments/assets/39eacd18-69cc-461f-be69-bc5b5086d96e
"Android") |

### Test plan

- [x] Tested locally on iOS
- [x] Tested locally on Android

### Related issues

- Fixes ACT-1442

### Backwards compatibility

Yes
### Network scalability

N/A

src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx

@@ -77,8 +77,12 @@ function TitleSection({
 }) {
   return (
     <View testID="TitleSection" onLayout={onLayout} style={styles.titleContainer}>
-      <TokenIcons tokensInfo={tokensInfo} />
-      <Text style={styles.title}>{title}</Text>
+      <View style={styles.titleTokenContainer}>
+        <View style={styles.titleTokenIconContainer}>
+          <TokenIcons tokensInfo={tokensInfo} />
+        </View>
+        <Text style={styles.title}>{title}</Text>
+      </View>
       <View style={styles.subtitleContainer}>
         <Text style={styles.subtitleLabel}>
           <Trans i18nKey="earnFlow.poolInfoScreen.chainName" values={{ networkName }}>
@@ -212,7 +216,6 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) {
   }, [allPositionsWithBalance])
 
   const onPressWithdraw = () => {
-    // TODO(tomm): once act-1385 is merge use the bottom sheet button presses
     AppAnalytics.track(EarnEvents.earn_pool_info_tap_withdraw, {
       poolId: positionId,
       providerId: appId,
@@ -266,8 +269,9 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) {
     navigation,
     title: <HeaderTitleSection earnPosition={pool} tokensInfo={tokensInfo} />,
     scrollPosition,
-    startFadeInPosition: titleHeight - titleHeight * 0.33,
-    animationDistance: titleHeight * 0.33,
+    // Numbers selected through trial and error
+    startFadeInPosition: titleHeight * 0.1,
+    animationDistance: titleHeight * 0.66,
   })
 
   return (
@@ -522,7 +526,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollContainer: {
-    padding: Spacing.Thick24,
+    paddingHorizontal: Spacing.Thick24,
     ...(Platform.OS === 'android' && {
       minHeight: variables.height,
     }),
@@ -542,6 +546,15 @@ const styles = StyleSheet.create({
   titleContainer: {
     gap: Spacing.Smallest8,
   },
+  titleTokenContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: Spacing.Smallest8,
+  },
+  titleTokenIconContainer: {
+    flexShrink: 1,
+  },
   subtitleContainer: {
     flex: 1,
     flexDirection: 'row',