Fullscreen viz mode + embedded viz sizing/scroll fixes for MCP App

build/features.json

@@ -0,0 +1,3 @@
+{
+  "mcp-apps": true
+}

features.json

@@ -1,3 +1,3 @@
 {
-  "mcp-apps": false
+  "mcp-apps": true
 }

src/web/apps/src/lib/embedTableauViz.test.ts

@@ -15,6 +15,7 @@ describe('createTableauVizElement', () => {
     expect(element.tagName.toLowerCase()).toBe('tableau-viz');
     expect(element.getAttribute('src')).toBe(vizUrl);
     expect(element.getAttribute('token')).toBe(token);
+    expect(element.getAttribute('toolbar')).toBe('hidden');
   });
 });
 
@@ -107,12 +108,13 @@ describe('embedTableauViz', () => {
 
     expect(vizElement).toBeTruthy();
 
-    // Simulate firstvizsizeknown event with viz height
+    // Simulate firstvizsizeknown event with viz dimensions
     const event = new CustomEvent('firstvizsizeknown', {
       detail: {
         vizSize: {
           sheetSize: {
             maxSize: {
+              width: 1200,
               height: 800,
             },
           },
@@ -122,10 +124,42 @@ describe('embedTableauViz', () => {
 
     vizElement.dispatchEvent(event);
 
-    // Should set height to the reported viz height
+    // Should set height attribute and style for the Embedding API iframe sizing
+    expect(vizElement.getAttribute('height')).toBe('800');
     expect(vizElement.style.height).toBe('800px');
   });
 
+  it('should set width to 100% string to preserve responsive behavior', () => {
+    const vizUrl = 'https://prod-uswest-c.online.tableau.com/site/mysite/views/workbook/view';
+    const token = 'test-token-123';
+
+    embedTableauViz(vizUrl, token);
+
+    const container = document.getElementById('tableauVizContainer');
+    const vizElement = container?.querySelector('tableau-viz') as HTMLElement;
+
+    expect(vizElement).toBeTruthy();
+
+    // Simulate firstvizsizeknown event with viz dimensions
+    const event = new CustomEvent('firstvizsizeknown', {
+      detail: {
+        vizSize: {
+          sheetSize: {
+            maxSize: {
+              width: 1200,
+              height: 800,
+            },
+          },
+        },
+      },
+    });
+
+    vizElement.dispatchEvent(event);
+
+    // Width should be set to "100%" to maintain responsive behavior
+    expect(vizElement.getAttribute('width')).toBe('100%');
+  });
+
   it('should leave height unset when firstvizsizeknown has no numeric height', () => {
     const vizUrl = 'https://prod-uswest-c.online.tableau.com/site/mysite/views/workbook/view';
     const token = 'test-token-123';

src/web/apps/src/lib/embedTableauViz.ts

@@ -20,6 +20,9 @@ export function createTableauVizElement(vizUrl: string, token: string): HTMLElem
   // Set the token for authentication
   viz.setAttribute('token', token);
 
+  // Hide the toolbar to prevent inner scrollbar (toolbar adds ~27-40px beyond reported sheet height)
+  viz.setAttribute('toolbar', 'hidden');
+
   return viz;
 }
 
@@ -39,16 +42,24 @@ export function embedTableauViz(vizUrl: string, token: string): void {
   const viz = createTableauVizElement(vizUrl, token);
 
   // The Embedding API reports the viz's natural size via `firstvizsizeknown`.
-  // Set the element's height to the viz's natural sheet height so it renders
-  // fully; the ext-apps SDK's built-in auto-resize then grows the app frame to
-  // match the resulting document height.
+  // Set the element's width/height ATTRIBUTES (not just CSS) so the Embedding
+  // API sizes its internal cross-origin iframe correctly. Without attributes,
+  // the iframe uses a default size and creates its own scrollbar.
+  // Width is set to "100%" for responsive behavior; height is the native px value.
   viz.addEventListener('firstvizsizeknown', (event) => {
     const vizSize = (event as CustomEvent).detail?.vizSize;
     const sheetHeight = vizSize?.sheetSize?.maxSize?.height;
     if (typeof sheetHeight !== 'number') {
       return;
     }
 
+    console.log('height: ', sheetHeight);
+
+    // Set attributes for Embedding API iframe sizing
+    viz.setAttribute('width', '100%');
+    viz.setAttribute('height', String(sheetHeight));
+
+    // Also set CSS height for backward compatibility
     viz.style.height = `${sheetHeight}px`;
   });