fix: item images on pos

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 {
@@ -1167,6 +1173,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_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 {