Fix payment method logos overflow in shortcode checkout (#11117)

Author: mgascam

changelog/fix-woopmnt-5397-regression-pm-logos-overflow-in-short-code-checkout

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix payment method logos overflow in shortcode checkout after adding JCB and UnionPay logos.

client/checkout/classic/event-handlers.js

@@ -181,19 +181,15 @@ jQuery( function ( $ ) {
 		const paymentMethods = getCardBrands();
 
 		function getMaxElements() {
-			const paymentMethodElement = document.querySelector(
-				'.payment_method_woocommerce_payments'
-			);
-			if ( ! paymentMethodElement ) {
-				return 4; // Default fallback
-			}
+			// Use viewport width as primary indicator (similar to blocks checkout)
+			const viewportWidth = window.innerWidth;
 
-			const elementWidth = paymentMethodElement.offsetWidth;
-			if ( elementWidth <= 300 ) {
+			// Specific tablet viewport range (768-781px) - needs room for Test Mode badge
+			if ( viewportWidth >= 768 && viewportWidth <= 900 ) {
 				return 1;
-			} else if ( elementWidth <= 330 ) {
-				return 2;
 			}
+			// Default - show 3 logos + counter badge = 4 visual elements total
+			return 3;
 		}
 
 		function shouldHavePopover() {

client/checkout/classic/style.scss

@@ -41,6 +41,15 @@
 			img:last-of-type {
 				margin-right: 0;
 			}
+
+			&-count {
+				margin-left: 4px;
+
+				// Tighter spacing on tablet viewports (768-900px) to conserve space for Test Mode badge
+				@media ( min-width: 768px ) and ( max-width: 900px ) {
+					margin-left: 0;
+				}
+			}
 		}
 		img {
 			float: right;