Confirm transaction screen - wrap lengthier values (#12733)

test/e2e/tests/send-edit.spec.js

@@ -62,7 +62,7 @@ describe('Editing Confirm Transaction', function () {
 
         // has correct updated value on the confirm screen the transaction
         const editedTransactionAmounts = await driver.findElements(
-          '.transaction-detail-item__row .transaction-detail-item__detail-text .currency-display-component__text',
+          '.transaction-detail-item__row .transaction-detail-item__detail-values .currency-display-component__text:last-of-type',
         );
         const editedTransactionAmount = editedTransactionAmounts[0];
         assert.equal(await editedTransactionAmount.getText(), '0.0008');

ui/components/app/transaction-detail-item/index.scss

@@ -5,12 +5,15 @@
 
   &__row {
     display: flex;
+    justify-content: space-between;
     grid-gap: 5px;
   }
 
-  &__title {
-    flex-grow: 1;
-    word-break: break-word;
+  &__detail-values {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    width: 65%;
   }
 
   .info-tooltip {
@@ -22,19 +25,6 @@
     }
   }
 
-  &__total {
-    font-weight: bold;
-    color: $ui-black;
-  }
-
-  &__subtitle {
-    flex-grow: 1;
-  }
-
-  &__subtext {
-    text-align: end;
-  }
-
   .currency-display-component {
     display: inline;
   }

ui/components/app/transaction-detail-item/transaction-detail-item.component.js

@@ -23,46 +23,35 @@ export default function TransactionDetailItem({
           color={detailTitleColor}
           fontWeight={FONT_WEIGHT.BOLD}
           variant={TYPOGRAPHY.H6}
-          className="transaction-detail-item__title"
         >
           {detailTitle}
         </Typography>
-        {detailText && (
+        <div className="transaction-detail-item__detail-values">
+          {detailText && (
+            <Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
+              {detailText}
+            </Typography>
+          )}
           <Typography
+            color={COLORS.BLACK}
+            fontWeight={FONT_WEIGHT.BOLD}
             variant={TYPOGRAPHY.H6}
-            className="transaction-detail-item__detail-text"
-            color={COLORS.UI4}
+            margin={[1, 1]}
           >
-            {detailText}
+            {detailTotal}
           </Typography>
-        )}
-        <Typography
-          color={COLORS.BLACK}
-          fontWeight={FONT_WEIGHT.BOLD}
-          variant={TYPOGRAPHY.H6}
-          className="transaction-detail-item__total"
-        >
-          {detailTotal}
-        </Typography>
+        </div>
       </div>
       <div className="transaction-detail-item__row">
         {React.isValidElement(subTitle) ? (
-          <div className="transaction-detail-item__subtitle">{subTitle}</div>
+          <div>{subTitle}</div>
         ) : (
-          <Typography
-            variant={TYPOGRAPHY.H7}
-            className="transaction-detail-item__subtitle"
-            color={COLORS.UI4}
-          >
+          <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
             {subTitle}
           </Typography>
         )}
 
-        <Typography
-          variant={TYPOGRAPHY.H7}
-          color={COLORS.UI4}
-          className="transaction-detail-item__subtext"
-        >
+        <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} align="end">
           {subText}
         </Typography>
       </div>