chore(runway): cherry-pick fix(perps): fix truncated market names and Pro fees layout

app/components/UI/Perps/Views/PerpsProMarketView/components/PerpsProOrderForm/PerpsProOrderForm.tsx

@@ -149,6 +149,7 @@ const Notices = ({ notices }: { notices: PerpsProOrderNotice[] }) =>
   ) : null;
 
 const summaryRowClassName = 'h-5 px-0';
+const summaryFeesRowClassName = 'min-h-6 h-auto px-0';
 const summaryRowStyle = { paddingHorizontal: 0 } as const;
 
 interface SlippageValueProps {
@@ -192,7 +193,7 @@ const OrderSummary = ({
   onSlippagePress,
   onFeesInfoPress,
 }: PerpsProOrderSummaryProps) => (
-  <Box twClassName="w-full gap-1 overflow-hidden" testID={ids.SUMMARY}>
+  <Box twClassName="w-full gap-1" testID={ids.SUMMARY}>
     <KeyValueRow
       keyLabel={strings('perps.order.margin')}
       value={margin}
@@ -231,6 +232,8 @@ const OrderSummary = ({
           feeDiscountPercentage={feeDiscountPercentage}
           testID={ids.SUMMARY_FEES_VALUE}
           variant={TextVariant.BodyXs}
+          color={TextColor.TextDefault}
+          fontWeight={FontWeight.Medium}
         />
       }
       keyEndButtonIconProps={buttonIcon(
@@ -240,7 +243,7 @@ const OrderSummary = ({
       )}
       keyTextProps={summaryKeyTextProps}
       valueTextProps={summaryValueTextProps}
-      twClassName={summaryRowClassName}
+      twClassName={summaryFeesRowClassName}
       style={summaryRowStyle}
       testID={ids.SUMMARY_FEES}
     />

app/components/UI/Perps/components/PerpsFeesDisplay/PerpsFeesDisplay.styles.ts

@@ -6,8 +6,13 @@ const createStyles = (_colors: Theme['colors']) =>
     feeRowContent: {
       flexDirection: 'row',
       alignItems: 'center',
+      flexShrink: 1,
       gap: 4,
     },
+    vipBadgeContainer: {
+      flexShrink: 0,
+      alignSelf: 'center',
+    },
   });
 
 export { createStyles };

app/components/UI/Perps/components/PerpsFeesDisplay/PerpsFeesDisplay.tsx

@@ -11,6 +11,7 @@ import {
   Text,
   TextVariant,
   TextColor,
+  FontWeight,
 } from '@metamask/design-system-react-native';
 
 interface PerpsFeesDisplayProps {
@@ -34,6 +35,9 @@ interface PerpsFeesDisplayProps {
   placeholder?: string;
   testID?: string;
   variant?: TextVariant;
+  /** Main fee value color. Defaults to `TextAlternative` for legacy screens. */
+  color?: TextColor;
+  fontWeight?: FontWeight;
 }
 
 const PerpsFeesDisplay: React.FC<PerpsFeesDisplayProps> = ({
@@ -43,6 +47,8 @@ const PerpsFeesDisplay: React.FC<PerpsFeesDisplayProps> = ({
   placeholder = '--',
   testID,
   variant = TextVariant.BodyMd,
+  color = TextColor.TextAlternative,
+  fontWeight,
 }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
@@ -71,7 +77,11 @@ const PerpsFeesDisplay: React.FC<PerpsFeesDisplayProps> = ({
 
   return (
     <View style={styles.feeRowContent}>
-      {showVipBadge ? <RewardsVipBadge /> : null}
+      {showVipBadge ? (
+        <View style={styles.vipBadgeContainer}>
+          <RewardsVipBadge />
+        </View>
+      ) : null}
       {originalFeeText !== undefined ? (
         <Text
           variant={variant}
@@ -83,7 +93,12 @@ const PerpsFeesDisplay: React.FC<PerpsFeesDisplayProps> = ({
           {originalFeeText}
         </Text>
       ) : null}
-      <Text variant={variant} color={TextColor.TextAlternative} testID={testID}>
+      <Text
+        variant={variant}
+        color={color}
+        fontWeight={fontWeight}
+        testID={testID}
+      >
         {feeText}
       </Text>
     </View>

app/components/UI/Perps/components/PerpsMarketHeader/PerpsMarketHeader.tsx

@@ -42,9 +42,6 @@ const styles = StyleSheet.create({
   container: {
     height: PERPS_MARKET_HEADER_HEIGHT,
   },
-  nameText: {
-    maxWidth: 120,
-  },
   subtitleCrossfade: {
     height: SUBTITLE_CROSSFADE_HEIGHT,
     justifyContent: 'center',
@@ -284,7 +281,6 @@ const PerpsMarketHeader = ({
             maxLeverage={market.maxLeverage}
             size={32}
             gap={2}
-            nameStyle={styles.nameText}
             onPress={onIdentityPress}
             subtitleContent={displaySubtitleAndPrice}
             testIDs={{

app/components/UI/Perps/components/PerpsMarketIdentity/PerpsMarketIdentity.tsx

@@ -79,20 +79,22 @@ const PerpsMarketIdentity = ({
       flexDirection={BoxFlexDirection.Row}
       alignItems={BoxAlignItems.Center}
       gap={gap}
-      twClassName={`self-start rounded-lg p-1 ${pressed ? 'bg-pressed' : ''}`}
+      twClassName={`rounded-lg p-1 ${pressed ? 'bg-pressed' : ''}`}
     >
       <PerpsTokenLogo symbol={symbol} size={size} testID={testIDs?.assetIcon} />
-      <Box flexDirection={BoxFlexDirection.Column}>
+      <Box flexDirection={BoxFlexDirection.Column} twClassName="flex-1 min-w-0">
         <Box
           flexDirection={BoxFlexDirection.Row}
           alignItems={BoxAlignItems.Center}
           gap={1}
+          twClassName="min-w-0"
         >
           <Text
             variant={TextVariant.BodyMd}
             fontWeight={FontWeight.Medium}
             numberOfLines={1}
-            style={nameStyle}
+            // eslint-disable-next-line react-native/no-inline-styles
+            style={[{ flexShrink: 1 }, nameStyle]}
             testID={testIDs?.assetName}
           >
             {displayTitle}

app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.tsx

@@ -196,6 +196,10 @@ const PerpsMarketRowItem = ({
       titleProps={{
         testID: getPerpsMarketRowItemSelector.assetLabel(displayMarket.symbol),
         numberOfLines: 1,
+        // flexShrink lets the title text yield space to the leverage badge so
+        // it doesn't overflow into the price column on long asset names.
+        // eslint-disable-next-line react-native/no-inline-styles
+        style: { flexShrink: 1 },
       }}
       titleEndAccessory={
         <PerpsLeverage maxLeverage={displayMarket.maxLeverage} />