From 1f4e1520a672833634232e5d57517e195a3985fc Mon Sep 17 00:00:00 2001
From: Bil0000 <62337003+Bil0000@users.noreply.github.com>
Date: Thu, 13 Aug 2026 10:20:48 +0000
Subject: [PATCH] fix(web): keep pull request panel within viewport

---
 .../src/components/preview/PreviewPanelShell.test.ts | 12 +++++++++++-
 .../web/src/components/preview/PreviewPanelShell.tsx |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/preview/PreviewPanelShell.test.ts b/apps/web/src/components/preview/PreviewPanelShell.test.ts
index 4ac086157a2f..31258b166bdf 100644
--- a/apps/web/src/components/preview/PreviewPanelShell.test.ts
+++ b/apps/web/src/components/preview/PreviewPanelShell.test.ts
@@ -1,6 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vite-plus/test";
 
-import { getPreviewPanelMaxWidth } from "./PreviewPanelShell";
+import { getPreviewPanelMaxWidth, PreviewPanelShell } from "./PreviewPanelShell";
 
 describe("getPreviewPanelMaxWidth", () => {
   it("allows the panel to use 70% of an ultra-wide viewport without a pixel ceiling", () => {
@@ -10,4 +12,12 @@ describe("getPreviewPanelMaxWidth", () => {
   it("rounds fractional CSS pixels down", () => {
     expect(getPreviewPanelMaxWidth(2_001)).toBe(1_400);
   });
+
+  it("keeps inline panels inside their containing workspace", () => {
+    const markup = renderToStaticMarkup(
+      jsx(PreviewPanelShell, { mode: "inline", defaultWidth: 1_000, children: "Panel" }),
+    );
+
+    expect(markup).toContain("max-w-full");
+  });
 });
diff --git a/apps/web/src/components/preview/PreviewPanelShell.tsx b/apps/web/src/components/preview/PreviewPanelShell.tsx
index 30a0c9eed0ff..17ca389feab2 100644
--- a/apps/web/src/components/preview/PreviewPanelShell.tsx
+++ b/apps/web/src/components/preview/PreviewPanelShell.tsx
@@ -51,7 +51,7 @@ export function PreviewPanelShell(props: {
   return (
     <div
       className={cn(
-        "relative flex h-full min-h-0 min-w-0 flex-col self-stretch bg-background",
+        "relative flex h-full min-h-0 min-w-0 max-w-full flex-col self-stretch bg-background",
         isInline
           ? props.maximized
             ? "flex-1 border-l border-border"