elpaypg 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elpaypg",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "ELPAY PG - single-backend payment gateway module",
   "type": "module",
   "main": "./src/index.js",

package/public/css/checkout.css

@@ -2694,6 +2694,47 @@
       }
     }
 
+    /* --- RUNTIME RESPONSIVE GUARD ---
+       checkout.html measures the real rendered width of .ypg-wrapper and toggles
+       ypg-layout-compact / ypg-layout-single on <body>. These rules therefore win
+       over any media query and guarantee the QR/payment workspace is never squeezed
+       into an unusable sliver, no matter how the checkout is embedded. */
+    body.ypg-layout-compact .ypg-pc-sidebar {
+      display: none !important;
+    }
+
+    body.ypg-layout-compact .ypg-pc-methods-list {
+      width: 190px !important;
+      min-width: 190px !important;
+      max-width: 190px !important;
+      flex-shrink: 0 !important;
+    }
+
+    body.ypg-layout-compact .ypg-pc-active-view {
+      padding: 14px 18px !important;
+    }
+
+    /* Below ~900px the methods rail itself becomes the problem, so collapse it and
+       fall back to the tabbed method selector. */
+    body.ypg-layout-single .ypg-pc-methods-list {
+      display: none !important;
+    }
+
+    body.ypg-layout-single .ypg-pc-active-view {
+      width: 100% !important;
+      padding: 12px 14px !important;
+    }
+
+    body.ypg-layout-single .ypg-method-selector-bar {
+      display: flex !important;
+    }
+
+    body.ypg-layout-single .ypg-qr-card-container {
+      flex-wrap: wrap !important;
+      justify-content: center !important;
+      gap: 12px !important;
+    }
+
     /* NARROW DESKTOP (iframe width 768-1099px)
        The branding sidebar (310px) + methods rail (220px) together eat 530px of a
        ~900px modal, leaving too little for the QR workspace, which then gets clipped
@@ -2730,42 +2771,6 @@
       }
     }
 
-    /* NARROW DESKTOP (iframe width 768-1099px)
-       The branding sidebar (310px) + methods rail (220px) together eat 530px of a
-       ~900px modal, leaving too little for the QR workspace, which then gets clipped
-       by the wrapper's overflow:hidden. Reclaim the branding panel and slim the rail
-       so the right-hand column always fits. */
-    @media (min-width: 768px) and (max-width: 1099px) {
-      .ypg-pc-sidebar {
-        display: none !important;
-      }
-
-      .ypg-pc-methods-list {
-        width: 190px !important;
-        min-width: 190px !important;
-        max-width: 190px !important;
-        flex-shrink: 0 !important;
-        padding: 12px 10px !important;
-      }
-
-      .ypg-pc-active-view {
-        padding: 14px 18px !important;
-      }
-    }
-
-    /* Very narrow desktop: let the QR card wrap instead of overflowing. */
-    @media (min-width: 768px) and (max-width: 880px) {
-      .ypg-pc-active-view {
-        padding: 12px 14px !important;
-      }
-
-      .ypg-qr-card-container {
-        flex-wrap: wrap !important;
-        justify-content: center !important;
-        gap: 12px !important;
-      }
-    }
-
     /* MOBILE SPECIFIC RULES - PINNED HEADER WITH CONTENT SCROLLING BEHIND IT */
     @media (max-width: 767px) {
       .ypg-pc-sidebar {
@@ -3126,4 +3131,4 @@
         max-width: 170px !important;
         max-height: 170px !important;
       }
-    }
+    }

package/public/views/checkout.html

@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="/css/checkout.css?v={{CSS_VERSION}}">
 </head>
 
-<body>
+<body data-elpay-version="{{CSS_VERSION}}">
 
   <!-- include:partials/splash.html -->
 
@@ -2828,6 +2828,42 @@
       });
     }
 
+    // --- RESPONSIVE LAYOUT GUARD ---
+    // The checkout is rendered inside an iframe whose width the stylesheet cannot
+    // always predict (the modal can be resized, the host page can be zoomed, and the
+    // wrapper is capped by 95vw). Media queries alone therefore sometimes kept the
+    // 3-column desktop layout alive in a container that was far too narrow, which
+    // squeezed the QR workspace down to ~210px and clipped it.
+    // Measuring the real rendered width and toggling layout modes makes the checkout
+    // degrade predictably: the branding panel drops first, then the methods rail.
+    const LAYOUT_COMPACT_MAX = 1100;
+    const LAYOUT_SINGLE_MAX = 900;
+
+    function applyResponsiveLayout() {
+      const wrapper = document.querySelector('.ypg-wrapper');
+      if (!wrapper) return;
+      const width = wrapper.getBoundingClientRect().width;
+      if (!width) return;
+      document.body.classList.toggle('ypg-layout-compact', width < LAYOUT_COMPACT_MAX);
+      document.body.classList.toggle('ypg-layout-single', width < LAYOUT_SINGLE_MAX);
+    }
+
+    function initResponsiveLayoutGuard() {
+      applyResponsiveLayout();
+      const wrapper = document.querySelector('.ypg-wrapper');
+      if (wrapper && typeof ResizeObserver !== 'undefined') {
+        try {
+          new ResizeObserver(applyResponsiveLayout).observe(wrapper);
+        } catch (e) { }
+      }
+      window.addEventListener('resize', applyResponsiveLayout);
+      window.addEventListener('orientationchange', applyResponsiveLayout);
+      console.log('[elpay-checkout] build', document.body.dataset.elpayVersion || 'unknown',
+        '| layout guard active');
+    }
+
+    initResponsiveLayoutGuard();
+
     // Boot checkout - restore preserved 1-week identity if available
     const bootPreserved = getPreservedIdentity();
     if (bootPreserved && bootPreserved.customer) {