fix: POS compatible for mobile view (#36534)

* fix: POS compatable for mobile view

* fix: variables for margin and font size, and dark mode compatibility while selecting any item from cart

---------

Co-authored-by: Ritvik Sardana <ritviksardana@Ritviks-MacBook-Air.local>

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

@@ -53,7 +53,7 @@
 
 	.seperator {
 		margin-left: var(--margin-sm);
-		margin-right: var(--margin-sm);
+		margin-right: var(--margin-md);
 		border-bottom: 1px solid var(--gray-300);
 	}
 
@@ -381,6 +381,7 @@
 						align-items: center;
 						padding: var(--padding-sm);
 						border-radius: var(--border-radius-md);
+						margin-right: var(--margin-sm);
 
 						&:hover {
 							background-color: var(--control-bg);
@@ -858,13 +859,10 @@
 
 			> .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 {
@@ -1152,3 +1150,62 @@
 		}
 	}
 }
+
+@media screen and (max-width: 620px) {
+	.point-of-sale-app {
+		grid-template-columns: repeat(1, minmax(0, 1fr));
+
+		> .items-selector {
+			grid-column: span 6 / span 1  !important;
+			> .items-container {
+			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+			}
+		}
+
+		> .item-details-container, .customer-cart-container {
+			grid-column: span 6 / span 1;
+		}
+
+		> .payment-container {
+			overflow: scroll;
+			> .fields-numpad-container {
+				flex-direction: column-reverse;
+				> .number-pad {
+					display: none;
+				}
+				> .fields-section {
+					width: 100%;
+				}
+			}
+		}
+
+		> .past-order-summary{
+			> .invoice-summary-wrapper {
+				width: 100%;
+			}
+		}
+
+		.numpad-totals {
+			> span {
+				padding: 0 5px;
+				font-size: var(--text-sm);
+			}
+		}
+
+		.col > * {
+			font-size: var(--text-sm) !important;
+		}
+
+		.control-input-wrapper {
+			padding-left: 0.15rem;
+		}
+
+		.pay-amount {
+			margin-left: 0.2rem;
+		}
+
+		.past-order-list {
+			grid-column: span 6 / span 1;
+		}
+	}
+}

erpnext/selling/page/point_of_sale/pos_item_cart.js

@@ -286,7 +286,7 @@ erpnext.PointOfSale.ItemCart = class {
 			this.item_is_selected = false;
 			this.$cart_container.find('.cart-item-wrapper').css("background-color", "");
 		} else {
-			$cart_item.css("background-color", "var(--gray-50)");
+			$cart_item.css("background-color", "var(--control-bg)");
 			this.item_is_selected = true;
 			this.$cart_container.find('.cart-item-wrapper').not(item).css("background-color", "");
 		}