From dc6f74cb48b4da74d0ba37e6709570b2dd51d243 Mon Sep 17 00:00:00 2001
From: Shendy <73803630+shendy-a8c@users.noreply.github.com>
Date: Tue, 3 Dec 2024 04:35:45 +0700
Subject: [PATCH] Fix styling on payment details page in mobile view. (#9790)

---
 .../fix-7230-payments-details-mobile-view     |   4 +
 .../components/dispute-status-chip/index.tsx  |   4 +-
 .../components/payment-status-chip/index.js   |   4 +-
 .../dispute-details/dispute-notice.tsx        |   7 +-
 .../dispute-details/style.scss                |  14 +
 .../test/__snapshots__/index.test.tsx.snap    |  22 +-
 client/payment-details/summary/index.tsx      |  66 +++--
 client/payment-details/summary/style.scss     |  22 +-
 .../test/__snapshots__/index.test.tsx.snap    | 264 +++++++++++-------
 .../test/__snapshots__/index.test.tsx.snap    |  43 ++-
 10 files changed, 280 insertions(+), 170 deletions(-)
 create mode 100644 changelog/fix-7230-payments-details-mobile-view

diff --git a/changelog/fix-7230-payments-details-mobile-view b/changelog/fix-7230-payments-details-mobile-view
new file mode 100644
index 00000000000..93e179a44ca
--- /dev/null
+++ b/changelog/fix-7230-payments-details-mobile-view
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix styling of transaction details page in mobile view.
diff --git a/client/components/dispute-status-chip/index.tsx b/client/components/dispute-status-chip/index.tsx
index 393089a8a78..dde601f3de7 100644
--- a/client/components/dispute-status-chip/index.tsx
+++ b/client/components/dispute-status-chip/index.tsx
@@ -23,11 +23,13 @@ interface Props {
 	status: DisputeStatus | string;
 	dueBy?: CachedDispute[ 'due_by' ] | EvidenceDetails[ 'due_by' ];
 	prefixDisputeType?: boolean;
+	className?: string;
 }
 const DisputeStatusChip: React.FC< Props > = ( {
 	status,
 	dueBy,
 	prefixDisputeType,
+	className,
 } ) => {
 	const mapping = displayStatus[ status ] || {};
 	let message = mapping.message || formatStringValue( status );
@@ -50,7 +52,7 @@ const DisputeStatusChip: React.FC< Props > = ( {
 		type = 'alert';
 	}
 
-	return <Chip message={ message } type={ type } />;
+	return <Chip className={ className } message={ message } type={ type } />;
 };
 
 export default DisputeStatusChip;
diff --git a/client/components/payment-status-chip/index.js b/client/components/payment-status-chip/index.js
index b26da2ad4ed..fb57843849b 100755
--- a/client/components/payment-status-chip/index.js
+++ b/client/components/payment-status-chip/index.js
@@ -11,11 +11,11 @@ import displayStatus from './mappings';
 import Chip from '../chip';
 import { formatStringValue } from 'utils';
 
-const PaymentStatusChip = ( { status } ) => {
+const PaymentStatusChip = ( { status, className } ) => {
 	const mapping = displayStatus[ status ] || {};
 	const message = mapping.message || formatStringValue( status );
 	const type = mapping.type || 'light';
-	return <Chip message={ message } type={ type } />;
+	return <Chip className={ className } message={ message } type={ type } />;
 };
 
 export default PaymentStatusChip;
diff --git a/client/payment-details/dispute-details/dispute-notice.tsx b/client/payment-details/dispute-details/dispute-notice.tsx
index 9d9edd8a9f7..d2c8b00fbf2 100644
--- a/client/payment-details/dispute-details/dispute-notice.tsx
+++ b/client/payment-details/dispute-details/dispute-notice.tsx
@@ -64,7 +64,12 @@ const DisputeNotice: React.FC< DisputeNoticeProps > = ( {
 			{ createInterpolateElement(
 				sprintf( noticeText, shopperDisputeReason ),
 				{
-					a: <ExternalLink href={ learnMoreDocsUrl } />,
+					a: (
+						<ExternalLink
+							className="dispute-notice__link"
+							href={ learnMoreDocsUrl }
+						/>
+					),
 					strong: <strong />,
 				}
 			) }
diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss
index 60773396b54..b68be2d0a20 100644
--- a/client/payment-details/dispute-details/style.scss
+++ b/client/payment-details/dispute-details/style.scss
@@ -182,3 +182,17 @@
 		margin-bottom: 0;
 	}
 }
+
+.dispute-notice {
+	.dispute-notice__link {
+		display: block;
+	}
+}
+
+@media screen and ( max-width: $break-small ) {
+	.wcpay-inline-notice.components-notice
+		.components-notice__content
+		a.dispute-notice__link {
+		white-space: normal;
+	}
+}
diff --git a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
index 9fa0098691b..7b4a7e3650f 100644
--- a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
@@ -30,21 +30,25 @@ exports[`Order details page should match the snapshot - Charge without payment i
               <div
                 class="payment-details-summary__section"
               >
-                <p
-                  class="payment-details-summary__amount"
+                <div
+                  class="payment-details-summary__amount-wrapper"
                 >
-                  $15.00
-                  <span
-                    class="payment-details-summary__amount-currency"
+                  <p
+                    class="payment-details-summary__amount"
                   >
-                    USD
-                  </span>
+                    $15.00
+                    <span
+                      class="payment-details-summary__amount-currency"
+                    >
+                      USD
+                    </span>
+                  </p>
                   <span
-                    class="chip chip-light"
+                    class="chip chip-light payment-details-summary__status"
                   >
                     Pending
                   </span>
-                </p>
+                </div>
                 <div
                   class="payment-details-summary__breakdown"
                 >
diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx
index 261645c8a85..06699f07147 100644
--- a/client/payment-details/summary/index.tsx
+++ b/client/payment-details/summary/index.tsx
@@ -257,37 +257,41 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 				<Flex direction="row" align="start">
 					<div className="payment-details-summary">
 						<div className="payment-details-summary__section">
-							<p className="payment-details-summary__amount">
-								<Loadable
-									isLoading={ isLoading }
-									placeholder={ __(
-										'Amount placeholder',
-										'woocommerce-payments'
-									) }
-								>
-									{ formattedAmount }
-									<span className="payment-details-summary__amount-currency">
-										{ charge.currency || 'USD' }
-									</span>
-									{ charge.dispute ? (
-										<DisputeStatusChip
-											status={ charge.dispute.status }
-											dueBy={
-												charge.dispute.evidence_details
-													?.due_by
-											}
-											prefixDisputeType={ true }
-										/>
-									) : (
-										<PaymentStatusChip
-											status={ getChargeStatus(
-												charge,
-												paymentIntent
-											) }
-										/>
-									) }
-								</Loadable>
-							</p>
+							<div className="payment-details-summary__amount-wrapper">
+								<p className="payment-details-summary__amount">
+									<Loadable
+										isLoading={ isLoading }
+										placeholder={ __(
+											'Amount placeholder',
+											'woocommerce-payments'
+										) }
+									>
+										{ formattedAmount }
+										<span className="payment-details-summary__amount-currency">
+											{ charge.currency || 'USD' }
+										</span>
+									</Loadable>
+								</p>
+								{ charge.dispute ? (
+									<DisputeStatusChip
+										className="payment-details-summary__status"
+										status={ charge.dispute.status }
+										dueBy={
+											charge.dispute.evidence_details
+												?.due_by
+										}
+										prefixDisputeType={ true }
+									/>
+								) : (
+									<PaymentStatusChip
+										className="payment-details-summary__status"
+										status={ getChargeStatus(
+											charge,
+											paymentIntent
+										) }
+									/>
+								) }
+							</div>
 							<div className="payment-details-summary__breakdown">
 								{ renderStorePrice ? (
 									<p className="payment-details-summary__breakdown__settlement-currency">
diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss
index ef67a756663..0c6c7775733 100755
--- a/client/payment-details/summary/style.scss
+++ b/client/payment-details/summary/style.scss
@@ -11,7 +11,7 @@
 .payment-details-summary {
 	display: flex;
 	flex: 1;
-	@include breakpoint( '<660px' ) {
+	@media screen and ( max-width: $break-medium ) {
 		flex-direction: column;
 	}
 
@@ -19,13 +19,29 @@
 		flex-grow: 1;
 	}
 
+	.payment-details-summary__amount-wrapper {
+		display: flex;
+		align-items: center;
+	}
+
+	@media screen and ( max-width: $break-small ) {
+		.payment-details-summary__amount-wrapper {
+			flex-direction: column;
+			align-items: flex-start;
+
+			.payment-details-summary__status {
+				order: -1;
+			}
+		}
+	}
+
 	.payment-details-summary__amount {
 		@include font-size( 32 );
 		font-weight: 300;
 		padding: 0;
 		margin: 0;
 		display: flex;
-		flex-wrap: wrap;
+		flex-wrap: nowrap;
 		align-items: center;
 
 		.payment-details-summary__amount-currency {
@@ -93,7 +109,7 @@
 		justify-content: initial;
 		flex-direction: column;
 		flex-wrap: nowrap;
-		@include breakpoint( '>660px' ) {
+		@media screen and ( min-width: $break-medium ) {
 			justify-content: flex-start;
 			align-items: flex-end;
 		}
diff --git a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
index 8286a7941bb..083da902f05 100644
--- a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
@@ -26,21 +26,25 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-primary"
+                  class="chip chip-primary payment-details-summary__status"
                 >
                   Payment authorized
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -362,21 +366,25 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-warning"
+                  class="chip chip-warning payment-details-summary__status"
                 >
                   Needs review
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -708,21 +716,25 @@ exports[`PaymentDetailsSummary correctly renders a charge 1`] = `
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-success"
+                  class="chip chip-success payment-details-summary__status"
                 >
                   Paid
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -1029,21 +1041,25 @@ exports[`PaymentDetailsSummary correctly renders when payment intent is missing
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-success"
+                  class="chip chip-success payment-details-summary__status"
                 >
                   Paid
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -1336,21 +1352,25 @@ exports[`PaymentDetailsSummary order missing notice does not render notice if or
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-success"
+                  class="chip chip-success payment-details-summary__status"
                 >
                   Paid
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -1657,21 +1677,25 @@ exports[`PaymentDetailsSummary order missing notice renders notice if order miss
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-success"
+                  class="chip chip-success payment-details-summary__status"
                 >
                   Paid
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -2001,21 +2025,25 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = `
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-success"
+                  class="chip chip-success payment-details-summary__status"
                 >
                   Paid
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -2349,21 +2377,25 @@ exports[`PaymentDetailsSummary renders fully refunded information for a charge 1
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-light"
+                  class="chip chip-light payment-details-summary__status"
                 >
                   Refunded
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -2647,19 +2679,23 @@ exports[`PaymentDetailsSummary renders loading state 1`] = `
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  USD
-                </span>
+                  
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    USD
+                  </span>
+                </p>
                 <span
-                  class="chip chip-light"
+                  class="chip chip-light payment-details-summary__status"
                 />
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -2887,21 +2923,25 @@ exports[`PaymentDetailsSummary renders partially refunded information for a char
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-light"
+                  class="chip chip-light payment-details-summary__status"
                 >
                   Partial refund
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -3211,21 +3251,25 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`]
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-success"
+                  class="chip chip-success payment-details-summary__status"
                 >
                   Paid
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
@@ -3532,21 +3576,25 @@ exports[`PaymentDetailsSummary renders the information of a dispute-reversal cha
             <div
               class="payment-details-summary__section"
             >
-              <p
-                class="payment-details-summary__amount"
+              <div
+                class="payment-details-summary__amount-wrapper"
               >
-                $20.00
-                <span
-                  class="payment-details-summary__amount-currency"
+                <p
+                  class="payment-details-summary__amount"
                 >
-                  usd
-                </span>
+                  $20.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                </p>
                 <span
-                  class="chip chip-success"
+                  class="chip chip-success payment-details-summary__status"
                 >
                   Disputed: Won
                 </span>
-              </p>
+              </div>
               <div
                 class="payment-details-summary__breakdown"
               >
diff --git a/client/payment-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/test/__snapshots__/index.test.tsx.snap
index 0798e4b5d52..aa8a34effd0 100644
--- a/client/payment-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/test/__snapshots__/index.test.tsx.snap
@@ -30,16 +30,25 @@ exports[`Payment details page should match the snapshot - Charge query param 1`]
               <div
                 class="payment-details-summary__section"
               >
-                <p
-                  class="payment-details-summary__amount"
+                <div
+                  class="payment-details-summary__amount-wrapper"
                 >
+                  <p
+                    class="payment-details-summary__amount"
+                  >
+                    <span
+                      aria-busy="true"
+                      class="is-loadable-placeholder"
+                    >
+                      Amount placeholder
+                    </span>
+                  </p>
                   <span
-                    aria-busy="true"
-                    class="is-loadable-placeholder"
+                    class="chip chip-success payment-details-summary__status"
                   >
-                    Amount placeholder
+                    Paid
                   </span>
-                </p>
+                </div>
                 <div
                   class="payment-details-summary__breakdown"
                 >
@@ -493,21 +502,25 @@ exports[`Payment details page should match the snapshot - Payment Intent query p
               <div
                 class="payment-details-summary__section"
               >
-                <p
-                  class="payment-details-summary__amount"
+                <div
+                  class="payment-details-summary__amount-wrapper"
                 >
-                  $1,500.00
-                  <span
-                    class="payment-details-summary__amount-currency"
+                  <p
+                    class="payment-details-summary__amount"
                   >
-                    usd
-                  </span>
+                    $1,500.00
+                    <span
+                      class="payment-details-summary__amount-currency"
+                    >
+                      usd
+                    </span>
+                  </p>
                   <span
-                    class="chip chip-success"
+                    class="chip chip-success payment-details-summary__status"
                   >
                     Paid
                   </span>
-                </p>
+                </div>
                 <div
                   class="payment-details-summary__breakdown"
                 >