authorgravatar for 62337003+Bil0000@users.noreply.github.comBilal Bakr <62337003+Bil0000@users.noreply.github.com> 2026-08-13 15:45:33+03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-13 08:45:33-04:00
log97db94c9bf6fa5d83f94c8fff85566d7fc96276e
tree7050cc0ff4bd0ffd9c4a43d5274c98b937d6bb1e
parent5015d7cf9f98fe551115b625031f01e3f022cd2d
signature Signed by PGP key B5690EEEBB952194

fix(web): keep pull request panel within viewport (#6451)

2 files changed, 12 insertions(+), 2 deletions(-)

apps/web/src/components/preview/PreviewPanelShell.test.ts+11-1
...@@ -1,6 +1,8 @@...@@ -1,6 +1,8 @@
1import { jsx } from "react/jsx-runtime";
2import { renderToStaticMarkup } from "react-dom/server";
1import { describe, expect, it } from "vite-plus/test";3import { describe, expect, it } from "vite-plus/test";
24
3import { getPreviewPanelMaxWidth } from "./PreviewPanelShell";5import { getPreviewPanelMaxWidth, PreviewPanelShell } from "./PreviewPanelShell";
46
5describe("getPreviewPanelMaxWidth", () => {7describe("getPreviewPanelMaxWidth", () => {
6 it("allows the panel to use 70% of an ultra-wide viewport without a pixel ceiling", () => {8 it("allows the panel to use 70% of an ultra-wide viewport without a pixel ceiling", () => {
...@@ -10,4 +12,12 @@ describe("getPreviewPanelMaxWidth", () => {...@@ -10,4 +12,12 @@ describe("getPreviewPanelMaxWidth", () => {
10 it("rounds fractional CSS pixels down", () => {12 it("rounds fractional CSS pixels down", () => {
11 expect(getPreviewPanelMaxWidth(2_001)).toBe(1_400);13 expect(getPreviewPanelMaxWidth(2_001)).toBe(1_400);
12 });14 });
15
16 it("keeps inline panels inside their containing workspace", () => {
17 const markup = renderToStaticMarkup(
18 jsx(PreviewPanelShell, { mode: "inline", defaultWidth: 1_000, children: "Panel" }),
19 );
20
21 expect(markup).toContain("max-w-full");
22 });
13});23});
apps/web/src/components/preview/PreviewPanelShell.tsx+1-1
...@@ -51,7 +51,7 @@ export function PreviewPanelShell(props: {...@@ -51,7 +51,7 @@ export function PreviewPanelShell(props: {
51 return (51 return (
52 <div52 <div
53 className={cn(53 className={cn(
54 "relative flex h-full min-h-0 min-w-0 flex-col self-stretch bg-background",54 "relative flex h-full min-h-0 min-w-0 max-w-full flex-col self-stretch bg-background",
55 isInline55 isInline
56 ? props.maximized56 ? props.maximized
57 ? "flex-1 border-l border-border"57 ? "flex-1 border-l border-border"