| author |  Bilal Bakr <62337003+Bil0000@users.noreply.github.com> 2026-08-13 15:45:33+03:00 |
| committer |  GitHub <noreply@github.com> 2026-08-13 08:45:33-04:00 |
| log | 97db94c9bf6fa5d83f94c8fff85566d7fc96276e |
| tree | 7050cc0ff4bd0ffd9c4a43d5274c98b937d6bb1e |
| parent | 5015d7cf9f98fe551115b625031f01e3f022cd2d |
| 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
apps/web/src/components/preview/PreviewPanelShell.test.ts+11-1
| ... | ... | @@ -1,6 +1,8 @@ |
| 1 | import { jsx } from "react/jsx-runtime"; | |
| 2 | import { renderToStaticMarkup } from "react-dom/server"; | |
| 1 | 3 | import { describe, expect, it } from "vite-plus/test"; |
| 2 | 4 | |
| 3 | import { getPreviewPanelMaxWidth } from "./PreviewPanelShell"; | |
| 5 | import { getPreviewPanelMaxWidth, PreviewPanelShell } from "./PreviewPanelShell"; | |
| 4 | 6 | |
| 5 | 7 | describe("getPreviewPanelMaxWidth", () => { |
| 6 | 8 | it("allows the panel to use 70% of an ultra-wide viewport without a pixel ceiling", () => { |
| ... | ... | @@ -10,4 +12,12 @@ describe("getPreviewPanelMaxWidth", () => { |
| 10 | 12 | it("rounds fractional CSS pixels down", () => { |
| 11 | 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 | 51 | return ( |
| 52 | 52 | <div |
| 53 | 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 | 55 | isInline |
| 56 | 56 | ? props.maximized |
| 57 | 57 | ? "flex-1 border-l border-border" |