fix(pos): UI fixes related to overflowing payment section (#25652)

* fix: additional fields overflowing in payment section

* fix: pos profile filter in pos opening dialog

* fix: item quantity pill

erpnext/public/scss/point-of-sale.scss

@@ -129,11 +129,20 @@
 				@extend .pointer-no-select;
 				border-radius: var(--border-radius-md);
 				box-shadow: var(--shadow-base);
+				position: relative;
 
 				&:hover {
 					transform: scale(1.02, 1.02);
 				}
 
+				.item-qty-pill {
+					position: absolute;
+					display: flex;
+					margin: var(--margin-sm);
+					justify-content: flex-end;
+					right: 0px;
+				}
+
 				.item-display {
 					display: flex;
 					align-items: center;
@@ -766,9 +775,10 @@
 		> .payment-modes {
 			display: flex;
 			padding-bottom: var(--padding-sm);
-			margin-bottom: var(--margin-xs);
+			margin-bottom: var(--margin-sm);
 			overflow-x: scroll;
 			overflow-y: hidden;
+			flex-shrink: 0;
 
 			> .payment-mode-wrapper {
 				min-width: 40%;
@@ -825,9 +835,24 @@
 		> .fields-numpad-container {
 			display: flex;
 			flex: 1;
+			height: 100%;
+    		position: relative;
+			justify-content: flex-end;
 
 			> .fields-section {
 				flex: 1;
+				position: absolute;
+				display: flex;
+				flex-direction: column;
+				width: 50%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				padding-bottom: var(--margin-md);
+
+				.invoice-fields {
+					overflow-y: scroll;
+				}
 			}
 
 			> .number-pad {
@@ -835,6 +860,7 @@
 				display: flex;
 				justify-content: flex-end;
 				align-items: flex-end;
+				max-width: 50%;
 
 				.numpad-container {
 					display: grid;
@@ -861,6 +887,7 @@
 			margin-bottom: var(--margin-sm);
 			justify-content: center;
 			flex-direction: column;
+			flex-shrink: 0;
 
 			> .totals {
 				display: flex;

erpnext/selling/page/point_of_sale/pos_controller.js

@@ -58,7 +58,7 @@ erpnext.PointOfSale.Controller = class {
 		}
 		const pos_profile_query = {
 			query: 'erpnext.accounts.doctype.pos_profile.pos_profile.pos_profile_query',
-			filters: { company: frappe.defaults.get_default('company') }
+			filters: { company: dialog.fields_dict.company.get_value() }
 		}
 		const dialog = new frappe.ui.Dialog({
 			title: __('Create POS Opening Entry'),

erpnext/selling/page/point_of_sale/pos_item_selector.js

@@ -90,14 +90,16 @@ erpnext.PointOfSale.ItemSelector = class {
 
 		function get_item_image_html() {
 			if (!me.hide_images && item_image) {
-				return `<div class="flex" style="margin: 8px; justify-content: flex-end">
+				return `<div class="item-qty-pill">
-						<span class="indicator-pill whitespace-nowrap ${indicator_color}" id="text">${qty_to_display}</span></div>
+							<span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
+						</div>
 						<div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100">
 							<img class="h-full" src="${item_image}" alt="${frappe.get_abbr(item.item_name)}" style="object-fit: cover;">
 						</div>`;
 			} else {
-				return `<div class="flex" style="margin: 8px; justify-content: flex-end">
+				return `<div class="item-qty-pill">
-						<span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span></div>
+							<span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
+						</div>
 						<div class="item-display abbr">${frappe.get_abbr(item.item_name)}</div>`;
 			}
 		}