Unified · Split
| @@ -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", () => { · 3 unmodified lines | ||
| 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 | }); |
| @@ -51,7 +51,7 @@ export function PreviewPanelShell(props: { · 50 unmodified lines | ||
| 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" |