Merge pull request #86 from modelcontextprotocol/fix-widget-layout

Fix widget layout to use full available width

Author: antonpk1

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;

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;

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;

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);

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;