fix: widget modal — explicit dialog height, iframe fills absolutely

public/widget-loader.js

@@ -11,75 +11,75 @@
   var color  = s.getAttribute('data-color') || '#4F46E5';
   var cls    = s.getAttribute('data-class') || 'hotelsync-book';
 
-  // Append embed param so the page renders without its own wrapper
   var url = rawUrl + (rawUrl.indexOf('?') >= 0 ? '&' : '?') + 'embed=true';
 
   function init() {
     /* ── Overlay ── */
     var overlay = document.createElement('div');
     overlay.style.cssText = [
-      'display:none', 'position:fixed', 'inset:0',
+      'display:none',
-      'background:rgba(0,0,0,.55)',
+      'position:fixed', 'inset:0',
-      'backdrop-filter:blur(4px)',
+      'background:rgba(0,0,0,.6)',
-      '-webkit-backdrop-filter:blur(4px)',
+      'backdrop-filter:blur(6px)',
+      '-webkit-backdrop-filter:blur(6px)',
       'z-index:99998',
-      'align-items:center', 'justify-content:center',
+      'align-items:center',
-      'padding:20px', 'box-sizing:border-box',
+      'justify-content:center',
+      'padding:16px',
+      'box-sizing:border-box',
     ].join(';');
 
-    /* ── Dialog box ── */
+    /* ── Dialog — explicit height so iframe fills it ── */
     var dialog = document.createElement('div');
     dialog.style.cssText = [
       'position:relative',
-      'width:100%', 'max-width:480px',
+      'width:100%',
-      'max-height:calc(100vh - 40px)',
+      'max-width:480px',
-      'border-radius:24px',
+      'height:90vh',
+      'max-height:720px',
+      'border-radius:20px',
       'overflow:hidden',
-      'box-shadow:0 32px 80px rgba(0,0,0,.4)',
+      'box-shadow:0 24px 64px rgba(0,0,0,.45)',
       'background:#fff',
-      'display:flex', 'flex-direction:column',
     ].join(';');
 
-    /* ── Close button (outside iframe, top-right of dialog) ── */
+    /* ── Close button — top-right corner of dialog ── */
     var closeBtn = document.createElement('button');
     closeBtn.innerHTML = '✕';
     closeBtn.title = 'Закрыть';
     closeBtn.style.cssText = [
-      'position:absolute', 'top:12px', 'right:12px', 'z-index:10',
+      'position:absolute', 'top:14px', 'right:14px', 'z-index:10',
       'width:34px', 'height:34px', 'border-radius:50%',
-      'background:rgba(255,255,255,.9)',
+      'background:rgba(255,255,255,.95)',
-      'backdrop-filter:blur(4px)',
       'color:#374151',
-      'border:1px solid rgba(0,0,0,.1)',
+      'border:1px solid rgba(0,0,0,.12)',
       'cursor:pointer',
-      'font-size:14px', 'font-weight:700',
+      'font-size:15px', 'font-weight:700',
       'display:flex', 'align-items:center', 'justify-content:center',
-      'box-shadow:0 2px 8px rgba(0,0,0,.15)',
+      'box-shadow:0 2px 8px rgba(0,0,0,.12)',
-      'transition:background .15s',
+      'transition:background .15s,transform .1s',
     ].join(';');
-    closeBtn.onmouseenter = function () { closeBtn.style.background = '#fff'; };
+    closeBtn.onmouseenter = function () { closeBtn.style.transform = 'scale(1.1)'; };
-    closeBtn.onmouseleave = function () { closeBtn.style.background = 'rgba(255,255,255,.9)'; };
+    closeBtn.onmouseleave = function () { closeBtn.style.transform = 'scale(1)'; };
     closeBtn.onclick = function () { overlay.style.display = 'none'; };
 
-    /* ── Iframe ── */
+    /* ── Iframe fills dialog completely ── */
     var iframe = document.createElement('iframe');
     iframe.src = url;
     iframe.setAttribute('allow', 'payment');
     iframe.style.cssText = [
-      'width:100%', 'height:680px',
+      'position:absolute', 'inset:0',
-      'border:none', 'display:block',
+      'width:100%', 'height:100%',
-      'flex:1',
+      'border:none',
     ].join(';');
 
-    dialog.appendChild(closeBtn);
     dialog.appendChild(iframe);
+    dialog.appendChild(closeBtn);   // on top of iframe
     overlay.appendChild(dialog);
 
     overlay.addEventListener('click', function (e) {
       if (e.target === overlay) overlay.style.display = 'none';
     });
-
-    // Close on Escape
     document.addEventListener('keydown', function (e) {
       if (e.key === 'Escape') overlay.style.display = 'none';
     });
@@ -99,16 +99,16 @@
         'font-size:15px', 'font-family:inherit', 'font-weight:700',
         'letter-spacing:.01em',
         'cursor:pointer', 'z-index:99997',
-        'box-shadow:0 6px 24px rgba(0,0,0,.25)',
+        'box-shadow:0 6px 24px rgba(0,0,0,.28)',
         'transition:transform .15s,box-shadow .15s',
       ].join(';');
       fab.onmouseenter = function () {
-        fab.style.transform = 'translateY(-2px) scale(1.03)';
+        fab.style.transform = 'translateY(-2px)';
-        fab.style.boxShadow = '0 10px 32px rgba(0,0,0,.32)';
+        fab.style.boxShadow = '0 10px 32px rgba(0,0,0,.35)';
       };
       fab.onmouseleave = function () {
         fab.style.transform = 'none';
-        fab.style.boxShadow = '0 6px 24px rgba(0,0,0,.25)';
+        fab.style.boxShadow = '0 6px 24px rgba(0,0,0,.28)';
       };
       fab.onclick = function () { window.hsOpenWidget(); };
       document.body.appendChild(fab);