From 8c73f6f19e90e1be54d17a3e1f88e7ed535bef90 Mon Sep 17 00:00:00 2001
From: Afshan <33727827+AfshanKhan@users.noreply.github.com>
Date: Wed, 16 Jun 2021 14:28:26 +0530
Subject: [PATCH] fix(pos): pos loyalty card alignment (#26051)

---
 erpnext/public/scss/point-of-sale.scss            | 10 +++++++++-
 erpnext/selling/page/point_of_sale/pos_payment.js |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index 9bdaa8d1eeb..c77b2ce3dfa 100644
--- a/erpnext/public/scss/point-of-sale.scss
+++ b/erpnext/public/scss/point-of-sale.scss
@@ -806,6 +806,9 @@
 						display: none;
 						float: right;
 						font-weight: 700;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
 					}
 
 					> .cash-shortcuts {
@@ -829,6 +832,11 @@
 						}
 					}
 				}
+
+				> .loyalty-card {
+					display: flex;
+					flex-direction: column;
+				}
 			}
 		}
 
@@ -1134,4 +1142,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/erpnext/selling/page/point_of_sale/pos_payment.js b/erpnext/selling/page/point_of_sale/pos_payment.js
index 156fb777fee..c484873d3e4 100644
--- a/erpnext/selling/page/point_of_sale/pos_payment.js
+++ b/erpnext/selling/page/point_of_sale/pos_payment.js
@@ -481,7 +481,7 @@ erpnext.PointOfSale.Payment = class {
 		const amount = doc.loyalty_amount > 0 ? format_currency(doc.loyalty_amount, doc.currency) : '';
 		this.$payment_modes.append(
 			`<div class="payment-mode-wrapper">
-				<div class="mode-of-payment" data-mode="loyalty-amount" data-payment-type="loyalty-amount">
+				<div class="mode-of-payment loyalty-card" data-mode="loyalty-amount" data-payment-type="loyalty-amount">
 					Redeem Loyalty Points
 					<div class="loyalty-amount-amount pay-amount">${amount}</div>
 					<div class="loyalty-amount-name">${loyalty_program}</div>
@@ -563,4 +563,4 @@ erpnext.PointOfSale.Payment = class {
 	toggle_component(show) {
 		show ? this.$component.css('display', 'flex') : this.$component.css('display', 'none');
 	}
-};
\ No newline at end of file
+};