DO-NOT-MERGE - This is a CI trigger

.gitignore

@@ -14,3 +14,6 @@ snykTask/coverage
 .eslintcache
 .ops
 ops/deploy/dist
+.dccache
+build/
+.vscode/

ui/enhancer/snyk-report.ts

@@ -183,7 +183,27 @@ export class SnykReportTab extends Controls.BaseControl {
   };
 
   private fillReportIFrameContent = (content: string): void => {
-    (document.getElementById('iframeID') as HTMLDivElement).innerHTML = content;
+    // Remove existing iframe and create a fresh one to avoid JS variable redeclaration issues
+    const oldIframe = document.getElementById('snyk-report');
+    if (oldIframe?.parentNode) {
+      oldIframe.parentNode.removeChild(oldIframe);
+    }
+
+    // Create new iframe
+    const newIframe = document.createElement('iframe');
+    newIframe.id = 'snyk-report';
+    newIframe.className = 'content';
+
+    // Add the new iframe to the document
+    document.body.appendChild(newIframe);
+
+    // Write content to the fresh iframe
+    const doc = newIframe.contentDocument || newIframe.contentWindow?.document;
+    if (doc) {
+      doc.open();
+      doc.write(content);
+      doc.close();
+    }
   };
 }
 

ui/snyk-report-tab.html

@@ -27,8 +27,9 @@
         height: 100%;
         overflow: auto;
       }
-      .iframeContainer {
+      .content {
         overflow: auto;
+        min-width: 100%;
         min-height: 100%;
       }
       .list {
@@ -84,11 +85,15 @@
     <script type="text/javascript">
       VSS.init();
     </script>
-    <h2>Reports:</h2>
-    <ul id="reportList" class="list"></ul>
-    <div class="iframeContainer">
-      <div id="iframeID" class="iframe"></div>
+    <div class="header">
+      <h2>Reports:</h2>
     </div>
-    <div id="snyk-report" class="container"></div>
+    <ul id="reportList" class="list"></ul>
+    <iframe
+      id="snyk-report"
+      class="content"
+      sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-presentation"
+      src="about:blank"
+    ></iframe>
   </body>
 </html>