elpaypg 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elpaypg",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "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,42 @@
       }
     }
 
+    /* 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.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 {