From 5e59a15baea6e1b579cb9125d2f17de4c75727f8 Mon Sep 17 00:00:00 2001
From: AI Assistant <ai@clientright.ru>
Date: Mon, 24 Nov 2025 16:03:25 +0300
Subject: [PATCH] feat: Increase iframe size and add auto-resize functionality

Problem:
- Form iframe was too small (800px fixed height)
- Only spinner visible, form content not fully visible

Solution:
1. Increased iframe container:
   - Changed Card bodyStyle to use calc(100vh - 200px)
   - Set minHeight to 800px
   - Made iframe flex: 1 to fill available space

2. Added auto-resize functionality:
   - Form sends iframe_resize messages with height
   - Parent component listens and adjusts iframe height
   - ResizeObserver watches for content changes
   - Window resize handler updates iframe size

3. Improved iframe styling:
   - Added sandbox attributes for security
   - Made height responsive (100% of container)
   - Minimum height ensures form is always visible

Files:
- frontend/src/components/form/StepClaimConfirmation.tsx: Increased iframe size, added resize handler
- frontend/src/components/form/generateConfirmationFormHTML.ts: Added auto-resize messaging
---
 .../components/form/StepClaimConfirmation.tsx | 39 ++++++++++++++++++-
 .../form/generateConfirmationFormHTML.ts      | 38 ++++++++++++++++++
 2 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/form/StepClaimConfirmation.tsx b/frontend/src/components/form/StepClaimConfirmation.tsx
index 223c48d..31fbc81 100644
--- a/frontend/src/components/form/StepClaimConfirmation.tsx
+++ b/frontend/src/components/form/StepClaimConfirmation.tsx
@@ -123,6 +123,30 @@ export default function StepClaimConfirmation({
         onPrev();
       } else if (event.data.type === 'claim_form_loaded') {
         setLoading(false);
+        // Автоматически подстраиваем высоту iframe после загрузки
+        if (iframeRef.current) {
+          try {
+            const iframe = iframeRef.current;
+            const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+            if (iframeDoc) {
+              const height = Math.max(
+                iframeDoc.body.scrollHeight,
+                iframeDoc.body.offsetHeight,
+                iframeDoc.documentElement.clientHeight,
+                iframeDoc.documentElement.scrollHeight,
+                iframeDoc.documentElement.offsetHeight
+              );
+              iframe.style.height = Math.max(height + 50, 800) + 'px';
+            }
+          } catch (e) {
+            console.warn('Не удалось автоматически подстроить высоту iframe:', e);
+          }
+        }
+      } else if (event.data.type === 'iframe_resize') {
+        // Обработка запроса на изменение размера от iframe
+        if (iframeRef.current && event.data.height) {
+          iframeRef.current.style.height = Math.max(event.data.height + 50, 800) + 'px';
+        }
       }
     };
 
@@ -144,17 +168,28 @@ export default function StepClaimConfirmation({
   }
 
   return (
-    <Card>
+    <Card 
+      bodyStyle={{ 
+        padding: 0,
+        height: 'calc(100vh - 200px)',
+        minHeight: '800px',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       <iframe
         ref={iframeRef}
         srcDoc={htmlContent}
         style={{
           width: '100%',
-          height: '800px',
+          height: '100%',
+          minHeight: '800px',
           border: 'none',
           borderRadius: '8px',
+          flex: 1,
         }}
         title="Форма подтверждения заявления"
+        sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
       />
     </Card>
   );
diff --git a/frontend/src/components/form/generateConfirmationFormHTML.ts b/frontend/src/components/form/generateConfirmationFormHTML.ts
index fef73d8..44d161c 100644
--- a/frontend/src/components/form/generateConfirmationFormHTML.ts
+++ b/frontend/src/components/form/generateConfirmationFormHTML.ts
@@ -1380,9 +1380,47 @@ export function generateConfirmationFormHTML(data: any): string {
         window.__innFilterAttached = true;
       }
       
+      // Функция для отправки размера iframe родителю
+      function sendIframeSize() {
+        try {
+          var height = Math.max(
+            document.body.scrollHeight,
+            document.body.offsetHeight,
+            document.documentElement.clientHeight,
+            document.documentElement.scrollHeight,
+            document.documentElement.offsetHeight
+          );
+          window.parent.postMessage({
+            type: 'iframe_resize',
+            height: height
+          }, '*');
+        } catch (e) {
+          console.warn('Не удалось отправить размер iframe:', e);
+        }
+      }
+      
       // Отправляем сообщение родителю при загрузке
       window.parent.postMessage({type: 'claim_form_loaded'}, '*');
       
+      // Отправляем размер iframe после небольшой задержки для полной загрузки
+      setTimeout(function() {
+        sendIframeSize();
+      }, 500);
+      
+      // Отправляем размер при изменении содержимого
+      var resizeObserver = null;
+      if (window.ResizeObserver) {
+        resizeObserver = new ResizeObserver(function() {
+          sendIframeSize();
+        });
+        resizeObserver.observe(document.body);
+      }
+      
+      // Также отправляем размер при изменении размера окна
+      window.addEventListener('resize', function() {
+        setTimeout(sendIframeSize, 100);
+      });
+      
       console.log('=== ИНИЦИАЛИЗАЦИЯ ЗАВЕРШЕНА ===');
     } catch (e) {
       console.error('=== ОШИБКА ИНИЦИАЛИЗАЦИИ ===');