@sidecar-ai/cli 0.1.0-alpha.12 → 0.1.0-alpha.13

package/dist/index.js

@@ -1430,7 +1430,8 @@ function renderWidgetHtml(title, javascript, css = "") {
     <style>
       :root { color-scheme: light dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
       html, body, #root { min-height: 100%; margin: 0; background: transparent; }
-      body { color: CanvasText; }
+      html, body { overflow: auto; }
+      body { color: CanvasText; min-width: 0; }
       * { box-sizing: border-box; }
       ${css}
     </style>
@@ -4424,6 +4425,7 @@ function renderDevHarnessHtml(state, options = {}) {
       }
       .message {
         display: grid;
+        flex: 0 0 auto;
         gap: 8px;
         max-width: 100%;
       }
@@ -4515,6 +4517,7 @@ function renderDevHarnessHtml(state, options = {}) {
         background: var(--panel);
         border: 1px solid var(--border);
         border-radius: 14px;
+        flex: 0 0 auto;
         overflow: hidden;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
         margin: 8px 0;
@@ -4545,16 +4548,28 @@ function renderDevHarnessHtml(state, options = {}) {
       :root[data-sidecar-theme="dark"] .tool-head .status {
         background: rgba(255, 255, 255, 0.05);
       }
-      .tool-body { display: grid; gap: 10px; padding: 14px; background: var(--panel); }
+      .tool-body {
+        background: var(--panel);
+        display: grid;
+        gap: 10px;
+        min-width: 0;
+        padding: 14px;
+      }
       
-      iframe {
+      .tool-body iframe {
         background: var(--widget-bg);
         border: 1px solid var(--border);
         border-radius: 10px;
-        min-height: 380px;
+        display: block;
+        height: clamp(360px, 58dvh, 720px);
+        min-height: 360px;
+        overflow: auto;
         width: 100%;
       }
-      :root[data-sidecar-device="mobile"] iframe { min-height: 520px; }
+      :root[data-sidecar-device="mobile"] .tool-body iframe {
+        height: clamp(440px, 70dvh, 680px);
+        min-height: 440px;
+      }
       
       .composer {
         background: var(--bg);
@@ -5572,6 +5587,7 @@ function appendToolResult(event) {
     const iframe = document.createElement("iframe");
     iframe.src = "/__sidecar/dev/resource?uri=" + encodeURIComponent(event.tool.resourceUri);
     iframe.title = event.tool.title || event.tool.name;
+    iframe.setAttribute("scrolling", "auto");
     frameContexts.set(iframe.contentWindow, {
       result: event.result,
       tool: event.tool,