fix: transaction flow section layout on re-designed confirmation pages (

#28720)

## **Description**

fix: transaction flow section layout on re-designed confirmation pages

## **Related issues**

Ref: #28015

## **Manual testing steps**

1. Open test dapp
2. Submit token transfer confirmation
3. Check layout of the page

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**
<img width="253" alt="Screenshot 2024-11-26 at 4 06 28 PM"
src="https://github.com/user-attachments/assets/4680e7d7-2a2b-41cd-8df7-be10fe1442e8">

<!-- [screenshots/recordings] -->

### **After**
<img width="357" alt="Screenshot 2024-11-26 at 4 06 15 PM"
src="https://github.com/user-attachments/assets/66328717-0027-4a43-bc5b-4958d6e8a007">

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`<TransactionFlowSection /> renders correctly 1`] = `
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
+        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent; flex-direction: column;"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"

ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx

@@ -21,8 +21,8 @@ import {
   ConfirmInfoRow,
   ConfirmInfoRowAddress,
 } from '../../../../../../components/app/confirm/info/row';
-import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants';
 import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { useConfirmContext } from '../../../../context/confirm';
 import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
@@ -61,6 +61,7 @@ export const TransactionFlowSection = () => {
           alertKey={RowAlertKey.SigningInWith}
           label={t('from')}
           ownerId={transactionMeta.id}
+          style={{ flexDirection: FlexDirection.Column }}
         >
           <Box marginTop={1}>
             <ConfirmInfoRowAddress
@@ -79,7 +80,7 @@ export const TransactionFlowSection = () => {
           <ConfirmInfoRow
             label={t('to')}
             style={{
-              flexDirection: 'column',
+              flexDirection: FlexDirection.Column,
               alignItems: AlignItems.flexStart,
             }}
           >