From c3a74273897df29aaff2203dfdbfda239b795e29 Mon Sep 17 00:00:00 2001
From: Soni Jay <jaygsoni14@gmail.com>
Date: Thu, 22 Jan 2026 22:03:28 +0530
Subject: [PATCH] WEB-616 For savings accounts the Product Name, Account Number
 and External Id must be in different rows in the blue box (#3036)

---
 .../savings-account-view.component.html       | 39 ++++++++++++-------
 .../savings-account-view.component.scss       |  6 +++
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/app/savings/savings-account-view/savings-account-view.component.html b/src/app/savings/savings-account-view/savings-account-view.component.html
index 8ba658c0d..f0e42bbdc 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.html
+++ b/src/app/savings/savings-account-view/savings-account-view.component.html
@@ -38,22 +38,31 @@
                   [matTooltip]="savingsAccountData.subStatus.value"
                 ></i>
               }
-              <span class="m-r-5">{{ 'labels.inputs.Savings Product' | translate }} :</span>
-              <span class="m-r-5"
-                ><mifosx-long-text textValue="{{ savingsAccountData.savingsProductName }}"></mifosx-long-text
-              ></span>
-              <mifosx-account-number
-                accountNo="{{ savingsAccountData.accountNo }}"
-                display="left"
-              ></mifosx-account-number>
-              <!-- External ID display -->
-              @if (savingsAccountData.externalId) {
-                <span class="external-id-row">
-                  <span class="m-r-5">{{ 'labels.inputs.External Id' | translate }} :</span>
-                  <span>{{ savingsAccountData.externalId }}</span>
-                </span>
-              }
             </h3>
+            <!-- Product Name Row -->
+            <span class="product-row">
+              <span class="m-r-5">{{ 'labels.inputs.Savings Product' | translate }} :</span>
+              <span class="m-r-5">
+                <mifosx-long-text textValue="{{ savingsAccountData.savingsProductName }}"></mifosx-long-text>
+              </span>
+            </span>
+            <!-- Account Number Row -->
+            <span class="account-number-row">
+              <span class="m-r-5">{{ 'labels.inputs.Account Number' | translate }} :</span>
+              <span class="m-r-5">
+                <mifosx-account-number
+                  accountNo="{{ savingsAccountData.accountNo }}"
+                  display="left"
+                ></mifosx-account-number>
+              </span>
+            </span>
+            <!-- External ID Row -->
+            @if (savingsAccountData.externalId) {
+              <span class="external-id-row">
+                <span class="m-r-5">{{ 'labels.inputs.External Id' | translate }} :</span>
+                <span>{{ savingsAccountData.externalId }}</span>
+              </span>
+            }
             <span class="account-overview">
               {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}:
               {{ savingsAccountData.clientName || savingsAccountData.groupName }}
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.scss b/src/app/savings/savings-account-view/savings-account-view.component.scss
index 6a6512499..6a53700a4 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.scss
+++ b/src/app/savings/savings-account-view/savings-account-view.component.scss
@@ -9,3 +9,9 @@
 mat-card-title {
   display: flex;
 }
+
+.product-row,
+.account-number-row,
+.external-id-row {
+  display: block;
+}