From e1d59235d35290e2e61a2af469c89d8fbf57fe14 Mon Sep 17 00:00:00 2001
From: Nagesh Pai <nagesh.pai@automattic.com>
Date: Fri, 20 Dec 2024 12:41:33 +0530
Subject: [PATCH] CSS adjustments

---
 client/deposits/details/index.tsx             | 70 ++++++++-------
 client/deposits/details/style.scss            | 12 ++-
 .../details/test/__snapshots__/index.tsx.snap | 90 ++++++++++++-------
 3 files changed, 108 insertions(+), 64 deletions(-)

diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx
index 27fb79247e2..f7788174a68 100644
--- a/client/deposits/details/index.tsx
+++ b/client/deposits/details/index.tsx
@@ -243,42 +243,46 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 				</CardHeader>
 				<CardBody>
 					<div className="woopayments-payout-details-header">
-						<h2>
-							{ __( 'Bank account', 'woocommerce-payments' ) }
-						</h2>
-						<div className="woopayments-payout-details-header__value">
-							{ deposit.bankAccount }
+						<div className="woopayments-payout-details-header__item">
+							<h2>
+								{ __( 'Bank account', 'woocommerce-payments' ) }
+							</h2>
+							<div className="woopayments-payout-details-header__value">
+								{ deposit.bankAccount }
+							</div>
 						</div>
-						<h2>
-							{ __(
-								'Bank reference ID',
-								'woocommerce-payments'
-							) }
-						</h2>
-						<div>
-							{ deposit.bank_reference_key ? (
-								<>
-									<span className="woopayments-payout-details-header__bank-reference-id">
-										{ deposit.bank_reference_key }
-									</span>
-									<CopyButton
-										textToCopy={
-											deposit.bank_reference_key
-										}
-										label={ __(
-											'Copy bank reference ID to clipboard',
+						<div className="woopayments-payout-details-header__item">
+							<h2>
+								{ __(
+									'Bank reference ID',
+									'woocommerce-payments'
+								) }
+							</h2>
+							<div className="woopayments-payout-details-header__value">
+								{ deposit.bank_reference_key ? (
+									<>
+										<span className="woopayments-payout-details-header__bank-reference-id">
+											{ deposit.bank_reference_key }
+										</span>
+										<CopyButton
+											textToCopy={
+												deposit.bank_reference_key
+											}
+											label={ __(
+												'Copy bank reference ID to clipboard',
+												'woocommerce-payments'
+											) }
+										/>
+									</>
+								) : (
+									<div className="woopayments-payout-details-header__value">
+										{ __(
+											'Not available',
 											'woocommerce-payments'
 										) }
-									/>
-								</>
-							) : (
-								<div className="woopayments-payout-details-header__value">
-									{ __(
-										'Not available',
-										'woocommerce-payments'
-									) }
-								</div>
-							) }
+									</div>
+								) }
+							</div>
 						</div>
 					</div>
 				</CardBody>
diff --git a/client/deposits/details/style.scss b/client/deposits/details/style.scss
index e47cbf6077c..b8e7515a3dd 100644
--- a/client/deposits/details/style.scss
+++ b/client/deposits/details/style.scss
@@ -58,8 +58,9 @@
 
 	.woopayments-payout-details-header {
 		display: flex;
-		align-items: flex-start;
+		flex-wrap: wrap;
 		justify-content: space-between;
+		gap: 0.75rem;
 
 		&__bank-reference-id {
 			font-family: monospace;
@@ -70,10 +71,19 @@
 			color: $wp-gray-50;
 		}
 
+		&__item {
+			display: flex;
+
+			@include breakpoint( '<660px' ) {
+				flex-direction: column;
+			}
+		}
+
 		h2 {
 			font-size: 0.6875rem;
 			font-weight: 500;
 			color: $wp-gray-90;
+			min-width: 11rem;
 			text-transform: uppercase;
 			margin: unset;
 		}
diff --git a/client/deposits/details/test/__snapshots__/index.tsx.snap b/client/deposits/details/test/__snapshots__/index.tsx.snap
index 71bc0f7af09..6b0973874ba 100644
--- a/client/deposits/details/test/__snapshots__/index.tsx.snap
+++ b/client/deposits/details/test/__snapshots__/index.tsx.snap
@@ -92,22 +92,32 @@ exports[`Deposit overview renders automatic payout correctly 1`] = `
           <div
             class="woopayments-payout-details-header"
           >
-            <h2>
-              Bank account
-            </h2>
             <div
-              class="woopayments-payout-details-header__value"
+              class="woopayments-payout-details-header__item"
             >
-              MOCK BANK •••• 1234 (USD)
+              <h2>
+                Bank account
+              </h2>
+              <div
+                class="woopayments-payout-details-header__value"
+              >
+                MOCK BANK •••• 1234 (USD)
+              </div>
             </div>
-            <h2>
-              Bank reference ID
-            </h2>
-            <div>
+            <div
+              class="woopayments-payout-details-header__item"
+            >
+              <h2>
+                Bank reference ID
+              </h2>
               <div
                 class="woopayments-payout-details-header__value"
               >
-                Not available
+                <div
+                  class="woopayments-payout-details-header__value"
+                >
+                  Not available
+                </div>
               </div>
             </div>
           </div>
@@ -222,22 +232,32 @@ exports[`Deposit overview renders automatic withdrawal correctly 1`] = `
           <div
             class="woopayments-payout-details-header"
           >
-            <h2>
-              Bank account
-            </h2>
             <div
-              class="woopayments-payout-details-header__value"
+              class="woopayments-payout-details-header__item"
             >
-              MOCK BANK •••• 1234 (USD)
+              <h2>
+                Bank account
+              </h2>
+              <div
+                class="woopayments-payout-details-header__value"
+              >
+                MOCK BANK •••• 1234 (USD)
+              </div>
             </div>
-            <h2>
-              Bank reference ID
-            </h2>
-            <div>
+            <div
+              class="woopayments-payout-details-header__item"
+            >
+              <h2>
+                Bank reference ID
+              </h2>
               <div
                 class="woopayments-payout-details-header__value"
               >
-                Not available
+                <div
+                  class="woopayments-payout-details-header__value"
+                >
+                  Not available
+                </div>
               </div>
             </div>
           </div>
@@ -406,22 +426,32 @@ exports[`Deposit overview renders instant deposit correctly 1`] = `
           <div
             class="woopayments-payout-details-header"
           >
-            <h2>
-              Bank account
-            </h2>
             <div
-              class="woopayments-payout-details-header__value"
+              class="woopayments-payout-details-header__item"
             >
-              MOCK BANK •••• 1234 (USD)
+              <h2>
+                Bank account
+              </h2>
+              <div
+                class="woopayments-payout-details-header__value"
+              >
+                MOCK BANK •••• 1234 (USD)
+              </div>
             </div>
-            <h2>
-              Bank reference ID
-            </h2>
-            <div>
+            <div
+              class="woopayments-payout-details-header__item"
+            >
+              <h2>
+                Bank reference ID
+              </h2>
               <div
                 class="woopayments-payout-details-header__value"
               >
-                Not available
+                <div
+                  class="woopayments-payout-details-header__value"
+                >
+                  Not available
+                </div>
               </div>
             </div>
           </div>