From a4f11554049f934197dba5fb75ada5c6f3bad1aa Mon Sep 17 00:00:00 2001
From: Jose Alberto Hernandez <alberto@black-box.local>
Date: Mon, 16 Jun 2025 13:15:46 -0500
Subject: [PATCH] fix: Display issues

---
 .../identities-tab.component.html             |   6 +-
 ...ct-interest-rate-chart-step.component.html |  22 +-
 ...ct-interest-rate-chart-step.component.html |  35 +--
 ...saving-product-preview-step.component.html | 111 ++++----
 .../saving-product-preview-step.component.ts  |   5 +-
 .../saving-product-general-tab.component.html |   8 +-
 ...-savings-accounting-details.component.html | 236 ++++++++++--------
 .../input-password.component.html             |   2 +-
 8 files changed, 223 insertions(+), 202 deletions(-)

diff --git a/src/app/clients/clients-view/identities-tab/identities-tab.component.html b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
index 52e9bea67..46c3e5b4a 100644
--- a/src/app/clients/clients-view/identities-tab/identities-tab.component.html
+++ b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
@@ -1,9 +1,7 @@
 <div class="tab-container mat-typography">
-  <div class="header-row">
-    <h3 class="mat-subheading-2">
-      {{ 'labels.heading.Identities' | translate }}
-    </h3>
+  <h3>{{ 'labels.heading.Identities' | translate }}</h3>
 
+  <div class="layout-row align-flex-end">
     <button
       mat-raised-button
       color="primary"
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
index 739306f68..7a66dcef8 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
@@ -19,8 +19,8 @@
     >
       <mat-divider class="flex-98"></mat-divider>
 
-      <div class="flex-fill layout-row-wrap responsive-column gap-2percent" [formGroupName]="chartIndex">
-        <div class="flex-98 layout-row align-end">
+      <div class="flex-fill layout-row-wrap responsive-column" [formGroupName]="chartIndex">
+        <div class="flex-100" align="end">
           <button
             type="button"
             mat-icon-button
@@ -33,12 +33,17 @@
           </button>
         </div>
 
-        <mat-form-field class="flex-fill flex-32">
+        <mat-form-field class="flex-28 m-r-5">
           <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
           <input matInput formControlName="name" required />
         </mat-form-field>
 
-        <mat-form-field class="flex-fill flex-31" (click)="validFromDatePicker.open()">
+        <mat-form-field class="flex-70">
+          <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+          <textarea matInput formControlName="description" required></textarea>
+        </mat-form-field>
+
+        <mat-form-field class="flex-48 m-r-5" (click)="validFromDatePicker.open()">
           <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
           <input
             matInput
@@ -56,19 +61,14 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="flex-fill" (click)="endDatePicker.open()">
+        <mat-form-field class="flex-48 m-r-5" (click)="endDatePicker.open()">
           <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate" />
           <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #endDatePicker></mat-datepicker>
         </mat-form-field>
 
-        <mat-form-field class="flex-fill">
-          <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-          <textarea matInput formControlName="description" required></textarea>
-        </mat-form-field>
-
-        <div class="flex-31 layout-row align-between align-items-center">
+        <div class="flex-100 layout-row align-between align-items-center">
           <mat-checkbox labelPosition="before" formControlName="isPrimaryGroupingByAmount">
             {{ 'labels.inputs.Is primary grouping by amount?' | translate }}
           </mat-checkbox>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
index 746539e11..d8b41391c 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
@@ -16,8 +16,8 @@
     >
       <mat-divider class="flex-98"></mat-divider>
 
-      <div class="flex-fill layout-row-wrap responsive-column gap-2percent" [formGroupName]="chartIndex">
-        <div class="flex-98 layout-row align-end">
+      <div class="flex-fill layout-row-wrap responsive-column" [formGroupName]="chartIndex">
+        <div class="flex-100" align="end">
           <button
             type="button"
             mat-icon-button
@@ -30,18 +30,18 @@
           </button>
         </div>
 
-        <mat-form-field class="flex-fill flex-32">
+        <mat-form-field class="flex-28 m-r-5">
           <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
-          <input
-            matInput
-            formControlName="name"
-            matTooltip="{{ 'tooltips.The name is a unique identifier for the chart' | translate }}"
-            required
-          />
+          <input matInput formControlName="name" required />
         </mat-form-field>
 
-        <mat-form-field class="flex-fill flex-31" (click)="validFromDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+        <mat-form-field class="flex-70">
+          <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+          <textarea matInput formControlName="description" required></textarea>
+        </mat-form-field>
+
+        <mat-form-field class="flex-48 m-r-5" (click)="validFromDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
           <input
             matInput
             [min]="minDate"
@@ -53,27 +53,18 @@
           <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #validFromDatePicker></mat-datepicker>
           <mat-error>
-            {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+            {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
             <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="flex-fill flex-31" (click)="endDatePicker.open()">
+        <mat-form-field class="flex-48 m-r-5" (click)="endDatePicker.open()">
           <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate" />
           <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #endDatePicker></mat-datepicker>
         </mat-form-field>
 
-        <mat-form-field class="flex-fill flex-65">
-          <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-          <textarea
-            matInput
-            formControlName="description"
-            matTooltip="{{ 'tooltips.The description is used to provide additional information' | translate }}"
-          ></textarea>
-        </mat-form-field>
-
         <div class="flex-31 layout-row align-between align-items-center">
           <mat-checkbox labelPosition="before" formControlName="isPrimaryGroupingByAmount">
             {{ 'labels.inputs.Is primary grouping by amount?' | translate }}
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
index 754c7e4db..4f5f93e8a 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
@@ -1,49 +1,49 @@
 <div class="responsive-column">
-  <h2 class="mat-h2 flex-fill">{{ savingProduct.name }}</h2>
+  <h2 class="mat-h2 flex-100">{{ savingProduct.name }}</h2>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
+  <mat-divider class="flex-100"></mat-divider>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Details' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill layout-row">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.shortName }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingProduct.description">
+  <div class="flex-100 layout-row" *ngIf="savingProduct.description">
     <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Currency' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Currency' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill layout-row">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
     <span class="flex-60">{{
       savingProduct.currencyCode | find: savingProductsTemplate.currencyOptions : 'code' : 'name'
     }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.digitsAfterDecimal }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Terms' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Terms' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill layout-row">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.nominalAnnualInterestRate | formatNumber }} %</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
     <span class="flex-60">{{
       savingProduct.interestCompoundingPeriodType
@@ -52,7 +52,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
     <span class="flex-60">{{
       savingProduct.interestPostingPeriodType
@@ -61,7 +61,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
     <span class="flex-60">{{
       savingProduct.interestCalculationType
@@ -70,7 +70,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
     <span class="flex-60">{{
       savingProduct.interestCalculationDaysInYearType
@@ -79,15 +79,15 @@
     }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Settings' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Settings' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill layout-row" *ngIf="savingProduct.minRequiredOpeningBalance">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="flex-100 layout-row" *ngIf="savingProduct.minRequiredOpeningBalance">
     <span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.minRequiredOpeningBalance | formatNumber }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingProduct.lockinPeriodFrequency">
+  <div class="flex-100 layout-row" *ngIf="savingProduct.lockinPeriodFrequency">
     <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
     <span class="flex-60">{{
       savingProduct.lockinPeriodFrequency +
@@ -97,64 +97,64 @@
     }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingProduct.minBalanceForInterestCalculation">
+  <div class="flex-100 layout-row" *ngIf="savingProduct.minBalanceForInterestCalculation">
     <span class="flex-40">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.minBalanceForInterestCalculation | formatNumber }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingProduct.minRequiredBalance">
+  <div class="flex-100 layout-row" *ngIf="savingProduct.minRequiredBalance">
     <span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.minRequiredBalance | formatNumber }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.withHoldTax | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingProduct.withHoldTax">
+  <div class="flex-100 layout-row" *ngIf="savingProduct.withHoldTax">
     <span class="flex-40">{{ 'labels.inputs.Tax Group' | translate }}:</span>
     <span class="flex-60">{{
       savingProduct.taxGroupId | find: savingProductsTemplate.taxGroupOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.allowOverdraft | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingProduct.minOverdraftForInterestCalculation">
+  <div class="flex-100 layout-row" *ngIf="savingProduct.minOverdraftForInterestCalculation">
     <span class="flex-40">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.minOverdraftForInterestCalculation | formatNumber }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
+  <div class="flex-100 layout-row" *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
     <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingProduct.overdraftLimit">
+  <div class="flex-100 layout-row" *ngIf="savingProduct.overdraftLimit">
     <span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.overdraftLimit | formatNumber }}</span>
   </div>
 
-  <div class="flex-fill layout-row">
+  <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Enable Dormancy Tracking' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.isDormancyTrackingActive | yesNo }}</span>
   </div>
 
-  <div *ngIf="savingProduct.isDormancyTrackingActive" class="layout-row-wrap responsive-column flex-fill">
+  <div *ngIf="savingProduct.isDormancyTrackingActive" class="layout-row-wrap responsive-column flex-100">
     <span class="flex-40">{{ 'labels.inputs.Number of Days to Inactive sub-status' | translate }}:</span>
     <span class="flex-60">{{ savingProduct.daysToInactive }}</span>
     <span class="flex-40">{{ 'labels.inputs.Number of Days to Dormant sub-status' | translate }}:</span>
@@ -163,11 +163,11 @@
     <span class="flex-60">{{ savingProduct.daysToEscheat }}</span>
   </div>
 
-  <div *ngIf="savingProduct.charges.length" class="layout-row-wrap responsive-column flex-fill">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
+  <div *ngIf="savingProduct.charges.length" class="layout-row-wrap responsive-column flex-100">
+    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Charges' | translate }}</h3>
 
-    <mat-divider class="flex-fill"></mat-divider>
-    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="savingProduct.charges">
+    <mat-divider class="flex-100"></mat-divider>
+    <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="savingProduct.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
@@ -201,14 +201,11 @@
     </table>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <mifosx-view-savings-accounting-details
-    class="flex-100"
-    [accountingRule]="accountingRule"
-    [accountingMappings]="accountingMappings"
-  >
+  <mat-divider class="flex-100"></mat-divider>
+
+  <mifosx-view-savings-accounting-details [accountingRule]="accountingRule" [accountingMappings]="accountingMappings">
   </mifosx-view-savings-accounting-details>
 
   <div
@@ -218,19 +215,19 @@
         savingProduct.feeToIncomeAccountMappings?.length ||
         savingProduct.penaltyToIncomeAccountMappings?.length)
     "
-    class="layout-row-wrap responsive-column flex-fill"
+    class="layout-row-wrap responsive-column flex-100"
   >
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
+    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
-    <mat-divider class="flex-fill"></mat-divider>
+    <mat-divider class="flex-100"></mat-divider>
     <div
       *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length"
-      class="flex-fill layout-row-wrap responsive-column"
+      class="flex-100 layout-row-wrap responsive-column"
     >
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
 
       <table
-        class="mat-elevation-z1 flex-fill"
+        class="mat-elevation-z1 flex-100"
         mat-table
         [dataSource]="savingProduct.paymentChannelToFundSourceMappings"
       >
@@ -256,10 +253,10 @@
       </table>
     </div>
 
-    <div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" class="flex-fill layout-row-wrap responsive-column">
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
+    <div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" class="flex-100 layout-row-wrap responsive-column">
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
 
-      <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
+      <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
         <ng-container matColumnDef="chargeId">
           <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
           <td mat-cell *matCellDef="let feesIncome">
@@ -284,11 +281,11 @@
 
     <div
       *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length"
-      class="flex-fill layout-row-wrap responsive-column"
+      class="flex-100 layout-row-wrap responsive-column"
     >
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
 
-      <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
+      <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
         <ng-container matColumnDef="chargeId">
           <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
           <td mat-cell *matCellDef="let penaltyIncome">
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.ts b/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.ts
index 8279456ae..bc69b43ce 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.ts
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.ts
@@ -44,6 +44,7 @@ export class SavingProductPreviewStepComponent implements OnInit, OnChanges {
 
   setCurrentValues(): void {
     this.accountingRule = this.accounting.getAccountingRuleFrom(this.savingProduct.accountingRule);
+
     if (this.isCashOrAccrualAccounting()) {
       const assetAccountData = this.savingProductsTemplate.accountingMappingOptions.assetAccountOptions || [];
       const incomeAccountData = this.savingProductsTemplate.accountingMappingOptions.incomeAccountOptions || [];
@@ -102,10 +103,10 @@ export class SavingProductPreviewStepComponent implements OnInit, OnChanges {
   }
 
   isCashOrAccrualAccounting(): boolean {
-    return this.accounting.isAccrualAccountingRuleId(this.savingProduct.accountingRule);
+    return this.accounting.isCashOrAccrualAccounting(this.accountingRule);
   }
 
   isAccrualAccounting(): boolean {
-    return this.accounting.isAccrualAccounting(this.savingProduct.accountingRule);
+    return this.accounting.isAccrualAccounting(this.accountingRule);
   }
 }
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
index de03f445a..944718df9 100644
--- a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
+++ b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
@@ -1,5 +1,11 @@
 <div class="layout-row align-end gap-2px responsive-column container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
+  <button
+    mat-raised-button
+    color="primary"
+    class="m-t-20"
+    [routerLink]="['../edit']"
+    *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'"
+  >
     <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
diff --git a/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html b/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
index 4c4d42449..2ff910bf4 100644
--- a/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
+++ b/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
@@ -1,114 +1,142 @@
 <div class="layout-row-wrap responsive-column">
-  <div *ngIf="accountingRule" class="layout-row-wrap responsive-column flex-fill flex-98">
+  <div *ngIf="accountingRule" class="layout-row responsive-column flex-100">
     <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
     <span class="flex-60">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
   </div>
 
-  <div *ngIf="isCashOrAccrualAccounting()" class="layout-row-wrap responsive-column flex-fill">
-    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Assets' | translate }}</h4>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Saving reference'"
-      [glAccount]="accountingMappings.savingsReferenceAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Overdraft portfolio'"
-      *ngIf="accountingMappings.overdraftPortfolioControl"
-      [glAccount]="accountingMappings.overdraftPortfolioControl"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Fees Receivable'"
-      *ngIf="isAccrualAccounting()"
-      [glAccount]="accountingMappings.feeReceivableAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Penalties Receivable'"
-      *ngIf="isAccrualAccounting()"
-      [glAccount]="accountingMappings.penaltyReceivableAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
+  <div class="layout-row-wrap responsive-column flex-100">
+    <div *ngIf="isCashOrAccrualAccounting()" class="layout-row-wrap responsive-column flex-100">
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Assets' | translate }}</h4>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Saving reference'"
+          [glAccount]="accountingMappings.savingsReferenceAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Overdraft portfolio'"
+          *ngIf="accountingMappings.overdraftPortfolioControl"
+          [glAccount]="accountingMappings.overdraftPortfolioControl"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Fees Receivable'"
+          *ngIf="isAccrualAccounting()"
+          [glAccount]="accountingMappings.feeReceivableAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Penalties Receivable'"
+          *ngIf="isAccrualAccounting()"
+          [glAccount]="accountingMappings.penaltyReceivableAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
 
-    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Saving control'"
-      [glAccount]="accountingMappings.savingsControlAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Savings transfers in suspense'"
-      [glAccount]="accountingMappings.transfersInSuspenseAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Interest Payable'"
-      *ngIf="isAccrualAccounting()"
-      [glAccount]="accountingMappings.interestPayableAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Escheat liability'"
-      *ngIf="accountingMappings.escheatLiabilityAccount"
-      [glAccount]="accountingMappings.escheatLiabilityAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Liabilities' | translate }}</h4>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Saving control'"
+          [glAccount]="accountingMappings.savingsControlAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Savings transfers in suspense'"
+          [glAccount]="accountingMappings.transfersInSuspenseAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Interest Payable'"
+          *ngIf="isAccrualAccounting()"
+          [glAccount]="accountingMappings.interestPayableAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Escheat liability'"
+          *ngIf="accountingMappings.escheatLiabilityAccount"
+          [glAccount]="accountingMappings.escheatLiabilityAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
 
-    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Income' | translate }}</h4>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Income from fees'"
-      [glAccount]="accountingMappings.incomeFromFeeAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Income from penalties'"
-      [glAccount]="accountingMappings.incomeFromPenaltyAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Income from Interest'"
-      *ngIf="accountingMappings.incomeFromInterest"
-      [glAccount]="accountingMappings.incomeFromInterest"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Income' | translate }}</h4>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Income from fees'"
+          [glAccount]="accountingMappings.incomeFromFeeAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Income from penalties'"
+          [glAccount]="accountingMappings.incomeFromPenaltyAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Income from Interest'"
+          *ngIf="accountingMappings.incomeFromInterest"
+          [glAccount]="accountingMappings.incomeFromInterest"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
 
-    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Expenses' | translate }}</h4>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Interest on savings'"
-      [glAccount]="accountingMappings.interestOnSavingsAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display
-      class="flex-100"
-      [accountTitle]="'Write-off'"
-      *ngIf="accountingMappings.writeOffAccount"
-      [glAccount]="accountingMappings.writeOffAccount"
-      [withTitle]="'40%'"
-    >
-    </mifosx-gl-account-display>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Expenses' | translate }}</h4>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Interest on savings'"
+          [glAccount]="accountingMappings.interestOnSavingsAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+      <div class="flex-100 layout-row-wrap responsive-column">
+        <mifosx-gl-account-display
+          class="flex-100"
+          [accountTitle]="'Write-off'"
+          *ngIf="accountingMappings.writeOffAccount"
+          [glAccount]="accountingMappings.writeOffAccount"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/input-password/input-password.component.html b/src/app/shared/input-password/input-password.component.html
index eb26b78ee..9a5061c27 100644
--- a/src/app/shared/input-password/input-password.component.html
+++ b/src/app/shared/input-password/input-password.component.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field class="flex-100">
   <mat-label>{{ label }}</mat-label>
   <input
     matInput