From 4c8e3dbb4fe855b2d2aa8c2685e887fb0cacfa27 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Thu, 29 Oct 2026 13:56:59 -0700
Subject: [PATCH] Constrain plugin panel iframe within sidebar height (#36085)

---
 .../right-sidebar/PluginPanel.fixture.tsx     | 49 +++++++++++++++++++
 .../components/right-sidebar/PluginPanel.tsx  |  2 +-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/src/components/right-sidebar/PluginPanel.fixture.tsx

diff --git a/src/renderer/src/components/right-sidebar/PluginPanel.fixture.tsx b/src/renderer/src/components/right-sidebar/PluginPanel.fixture.tsx
new file mode 100644
index 00000000000..d5df9f55edd
--- /dev/null
+++ b/src/renderer/src/components/right-sidebar/PluginPanel.fixture.tsx
@@ -0,0 +1,49 @@
+import { defineFixture } from '../../component-fixtures/component-fixture'
+import { usePluginPanelsStore } from '@/store/plugin-panels'
+import { buildPluginPanelShellHtml } from '../../../../shared/plugins/frames/plugin-panel-shell'
+import PluginPanel from './PluginPanel'
+
+export const compact = defineFixture({
+  width: 280,
+  setup() {
+    usePluginPanelsStore.getState().setPlugins([
+      {
+        pluginKey: 'samples.layout',
+        consentFingerprint: 'fixture',
+        name: 'Layout',
+        version: '1.0.0',
+        publisher: 'samples',
+        status: 'idle',
+        needsReconsent: false,
+        isDev: false,
+        official: false,
+        bundled: false,
+        capabilities: [],
+        panels: [{ id: 'panel', title: 'Layout', tabKey: 'plugin:samples.layout/panel' }],
+        commands: [],
+        hasWorker: false,
+        restarts: 0
+      }
+    ])
+    window.api = {
+      ...window.api,
+      plugins: {
+        ...window.api.plugins,
+        readPanelEntry: async () => ({
+          html: buildPluginPanelShellHtml(
+            '<body style="margin:0;color:var(--orca-foreground);background:var(--orca-background)"><div style="height:100vh;box-sizing:border-box;border:1px solid var(--orca-border);display:flex;align-items:end">Panel bottom</div></body>'
+          ),
+          sessionToken: 'fixture'
+        })
+      }
+    }
+  },
+  render: () => (
+    <div className="flex h-32 flex-col overflow-hidden">
+      <div className="h-9 shrink-0 border-b border-border">Plugin sidebar</div>
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <PluginPanel tabKey="plugin:samples.layout/panel" />
+      </div>
+    </div>
+  )
+})
diff --git a/src/renderer/src/components/right-sidebar/PluginPanel.tsx b/src/renderer/src/components/right-sidebar/PluginPanel.tsx
index 77c4d9e3295..2036ddd521c 100644
--- a/src/renderer/src/components/right-sidebar/PluginPanel.tsx
+++ b/src/renderer/src/components/right-sidebar/PluginPanel.tsx
@@ -108,7 +108,7 @@ function PluginPanel({ tabKey }: PluginPanelProps): React.JSX.Element {
       srcDoc={panelDocument ?? ''}
       onLoad={onFrameLoad}
       title={panel.title}
-      className="h-full w-full flex-1 border-0 bg-background"
+      className="min-h-0 w-full flex-1 border-0 bg-background"
     />
   )
 }