Merge pull request #47182 from diptanilsaha/fix-pos-item-selector-cart-ui

fix: pos item selector cart ui

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

@@ -153,9 +153,11 @@
 					margin-bottom: 0px;
 					min-height: 8rem;
 					height: 8rem;
+					overflow: hidden;
 
 					> img {
 						@extend .image;
+						width: 100%;
 					}
 				}
 
@@ -395,9 +397,11 @@
 							border-radius: var(--border-radius-md);
 							color: var(--text-light);
 							margin-right: var(--margin-md);
+							overflow: hidden;
 
 							> img {
 								@extend .image;
+								width: 100%;
 							}
 						}
 
@@ -699,14 +703,16 @@
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				width: 11rem;
-				height: 11rem;
+				max-width: 11rem;
+				max-height: 11rem;
 				border-radius: var(--border-radius-md);
 				margin-left: var(--margin-md);
 				color: var(--gray-500);
+				overflow: hidden;
 
 				> img {
 					@extend .image;
+					width: 100%;
 				}
 
 				> .item-abbr {
@@ -716,8 +722,8 @@
 					justify-content: center;
 					border-radius: var(--border-radius-md);
 					font-size: var(--text-3xl);
-					width: 100%;
-					height: 100%;
+					width: 11rem;
+					height: 11rem;
 				}
 			}
 		}
@@ -747,6 +753,7 @@
 			display: grid;
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 			column-gap: var(--padding-md);
+			row-gap: var(--padding-md);
 
 			> .auto-fetch-btn {
 				@extend .pointer-no-select;
@@ -1167,6 +1174,16 @@
 	}
 }
 
+@media screen and (max-width: 1200px) {
+	.point-of-sale-app {
+		> .items-selector {
+			> .items-container {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+			}
+		}
+	}
+}
+
 @media screen and (max-width: 620px) {
 	.point-of-sale-app {
 		grid-template-columns: repeat(1, minmax(0, 1fr));

erpnext/selling/page/point_of_sale/pos_controller.js

@@ -376,7 +376,6 @@ erpnext.PointOfSale.Controller = class {
 
 				highlight_cart_item: (item) => {
 					const cart_item = this.cart.get_cart_item(item);
-					this.cart.toggle_item_highlight(cart_item);
 				},
 
 				item_field_focused: (fieldname) => {

erpnext/selling/page/point_of_sale/pos_item_cart.js

@@ -280,7 +280,7 @@ erpnext.PointOfSale.ItemCart = class {
 
 	toggle_item_highlight(item) {
 		const $cart_item = $(item);
-		const item_is_highlighted = $cart_item.attr("style") == "background-color:var(--gray-50);";
+		const item_is_highlighted = $cart_item.attr("style") == "background-color: var(--control-bg);";
 
 		if (!item || item_is_highlighted) {
 			this.item_is_selected = false;

erpnext/selling/page/point_of_sale/pos_item_selector.js

@@ -104,11 +104,11 @@ erpnext.PointOfSale.ItemSelector = class {
 				return `<div class="item-qty-pill">
 							<span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
 						</div>
-						<div class="flex items-center justify-center border-b-grey text-6xl text-grey-100" style="height:8rem; min-height:8rem">
+						<div class="item-display">
 							<img
 								onerror="cur_pos.item_selector.handle_broken_image(this)"
-								class="h-full item-img" src="${item_image}"
-								alt="${frappe.get_abbr(item.item_name)}"
+								class="item-img" src="${item_image}"
+								alt="${item.item_name}"
 							>
 						</div>`;
 			} else {