elpaypg 2.1.0 → 2.1.2

package/package.json

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

package/public/css/checkout.css

@@ -2532,9 +2532,12 @@
         display: flex !important;
         flex-direction: row !important;
         flex: 1 !important;
+        width: 100% !important;
+        max-width: 100% !important;
         height: 100% !important;
         max-height: 100% !important;
         min-height: 0 !important;
+        min-width: 0 !important;
         overflow: hidden !important;
       }
 
@@ -2691,6 +2694,78 @@
       }
     }
 
+    /* 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;
+      }
+    }
+
+    /* 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 {

package/public/elpay-checkout.js

@@ -704,9 +704,9 @@
         /* DESKTOP / PC MODAL STYLES (Razorpay 2-Column Exact Layout) */
         @media (min-width: 768px) {
           .elpay-checkout-container {
-            width: 900px;
+            width: 960px;
             max-width: 95vw;
-            height: 600px;
+            height: 620px;
             max-height: 92vh;
             border-radius: 16px;
             box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
@@ -716,6 +716,15 @@
           }
         }
 
+        /* Large desktop: give the branding sidebar room so the QR workspace keeps
+           full width. Below this breakpoint the checkout hides the sidebar instead. */
+        @media (min-width: 1200px) {
+          .elpay-checkout-container {
+            width: 1100px;
+            height: 660px;
+          }
+        }
+
         /* MOBILE BOTTOM DRAWER / BOTTOM SHEET STYLES */
         @media (max-width: 767px) {
           .elpay-checkout-backdrop {

package/public/elpay.js

@@ -710,9 +710,9 @@
         /* DESKTOP / PC MODAL STYLES (Razorpay 2-Column Exact Layout) */
         @media (min-width: 768px) {
           .elpay-checkout-container {
-            width: 900px;
+            width: 960px;
             max-width: 95vw;
-            height: 600px;
+            height: 620px;
             max-height: 92vh;
             border-radius: 16px;
             box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
@@ -722,6 +722,15 @@
           }
         }
 
+        /* Large desktop: give the branding sidebar room so the QR workspace keeps
+           full width. Below this breakpoint the checkout hides the sidebar instead. */
+        @media (min-width: 1200px) {
+          .elpay-checkout-container {
+            width: 1100px;
+            height: 660px;
+          }
+        }
+
         /* MOBILE BOTTOM DRAWER / BOTTOM SHEET STYLES */
         @media (max-width: 767px) {
           .elpay-checkout-backdrop {

package/public/views/checkout.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>{{MERCHANT_NAME}} · {{APP_NAME}} Checkout</title>
-  <link rel="stylesheet" href="/css/checkout.css">
+  <link rel="stylesheet" href="/css/checkout.css?v={{CSS_VERSION}}">
 </head>
 
 <body>

package/src/router.js

@@ -97,6 +97,22 @@ export function createRouter(ctx = {}) {
   return router;
 }
 
+/**
+ * Reads the installed package version so static assets can be cache-busted.
+ * Without this a merchant browser can keep serving a stale checkout stylesheet
+ * after the package is upgraded, which silently re-introduces old layout bugs.
+ */
+function readPackageVersion() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
+    return String(pkg.version || '0.0.0');
+  } catch {
+    return '0.0.0';
+  }
+}
+
+const ASSET_VERSION = readPackageVersion();
+
 function renderCheckoutPage(ctx, paymentId, state) {
   const template = loadTemplateWithPartials();
   const values = {
@@ -105,6 +121,7 @@ function renderCheckoutPage(ctx, paymentId, state) {
     APP_NAME: state?.branding?.appName || 'ELPAY PG',
     MERCHANT_NAME: state?.merchantName || 'Merchant Checkout',
     AMOUNT: state?.amount || '0.00',
+    CSS_VERSION: ASSET_VERSION,
     INITIAL_STATE_JSON: serializeForScript(state || {})
   };
   return renderTemplate(template, values);