From 8ef9142f005f188ab26d24a2c970b2c9cd021c3d Mon Sep 17 00:00:00 2001
From: Anton Pidkuiko MacBook <antonp@anthropic.com>
Date: Mon, 8 Dec 2025 13:51:56 +0000
Subject: [PATCH] Fix widget layout to use full available width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change marketing widget containers from fixed 600px to width: 100%
- Update basic-host iframe to use flex: 1 for proper expansion
- Widgets now fill their parent container instead of fixed size

Files changed:
- examples/budget-allocator-server/src/mcp-app.css
- examples/customer-segmentation-server/src/mcp-app.css
- examples/scenario-modeler-server/src/mcp-app.css
- examples/system-monitor-server/src/mcp-app.css
- examples/basic-host/src/index.module.css

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 examples/basic-host/src/index.module.css              | 5 ++---
 examples/budget-allocator-server/src/mcp-app.css      | 2 +-
 examples/customer-segmentation-server/src/mcp-app.css | 2 +-
 examples/scenario-modeler-server/src/mcp-app.css      | 2 +-
 examples/system-monitor-server/src/mcp-app.css        | 2 +-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/examples/basic-host/src/index.module.css b/examples/basic-host/src/index.module.css
index 684b2c7..9681e96 100644
--- a/examples/basic-host/src/index.module.css
+++ b/examples/basic-host/src/index.module.css
@@ -113,9 +113,8 @@
   min-height: 200px;
 
   iframe {
-    flex-shrink: 0;
-    height: 100%;
-    max-width: 100%;
+    flex: 1 0 auto;
+    height: 600px;
     box-sizing: border-box;
     border: 3px dashed #888;
     border-radius: 4px;
diff --git a/examples/budget-allocator-server/src/mcp-app.css b/examples/budget-allocator-server/src/mcp-app.css
index 93caf9f..979a9a7 100644
--- a/examples/budget-allocator-server/src/mcp-app.css
+++ b/examples/budget-allocator-server/src/mcp-app.css
@@ -40,7 +40,7 @@ body {
   display: flex;
   flex-direction: column;
   height: 600px;
-  width: 600px;
+  width: 100%;
   max-width: 100%;
   max-height: 100%;
   overflow: hidden;
diff --git a/examples/customer-segmentation-server/src/mcp-app.css b/examples/customer-segmentation-server/src/mcp-app.css
index 0158c34..4bdede2 100644
--- a/examples/customer-segmentation-server/src/mcp-app.css
+++ b/examples/customer-segmentation-server/src/mcp-app.css
@@ -37,7 +37,7 @@ html, body {
 }
 
 .main {
-  width: 600px;
+  width: 100%;
   height: 600px;
   margin: 0 auto;
   padding: 12px;
diff --git a/examples/scenario-modeler-server/src/mcp-app.css b/examples/scenario-modeler-server/src/mcp-app.css
index 5541668..d49809a 100644
--- a/examples/scenario-modeler-server/src/mcp-app.css
+++ b/examples/scenario-modeler-server/src/mcp-app.css
@@ -37,7 +37,7 @@
    ============================================================================ */
 
 .main {
-  width: 600px;
+  width: 100%;
   height: 600px;
   overflow: hidden;
   background: var(--bg-primary);
diff --git a/examples/system-monitor-server/src/mcp-app.css b/examples/system-monitor-server/src/mcp-app.css
index ac95af4..74c0905 100644
--- a/examples/system-monitor-server/src/mcp-app.css
+++ b/examples/system-monitor-server/src/mcp-app.css
@@ -36,7 +36,7 @@ html, body {
 }
 
 .main {
-  width: 600px;
+  width: 100%;
   margin: 0 auto;
   padding: 16px;
   display: flex;