diff --git a/apps/web/src/components/preview/PreviewPanelShell.test.ts b/apps/web/src/components/preview/PreviewPanelShell.test.ts new file mode 100644 index 00000000000..4ac086157a2 --- /dev/null +++ b/apps/web/src/components/preview/PreviewPanelShell.test.ts @@ -0,0 +1,13 @@ +import { describe, expect, it } from "vite-plus/test"; + +import { getPreviewPanelMaxWidth } from "./PreviewPanelShell"; + +describe("getPreviewPanelMaxWidth", () => { + it("allows the panel to use 70% of an ultra-wide viewport without a pixel ceiling", () => { + expect(getPreviewPanelMaxWidth(6_000)).toBe(4_200); + }); + + it("rounds fractional CSS pixels down", () => { + expect(getPreviewPanelMaxWidth(2_001)).toBe(1_400); + }); +}); diff --git a/apps/web/src/components/preview/PreviewPanelShell.tsx b/apps/web/src/components/preview/PreviewPanelShell.tsx index 6de828c1e63..a12c23e386b 100644 --- a/apps/web/src/components/preview/PreviewPanelShell.tsx +++ b/apps/web/src/components/preview/PreviewPanelShell.tsx @@ -10,12 +10,14 @@ export type PreviewPanelMode = "inline" | "sheet" | "sidebar" | "embedded"; const PREVIEW_PANEL_WIDTH_STORAGE_KEY = "t3code:preview-panel-width"; const PREVIEW_PANEL_MIN_WIDTH = 360; -/** Hard ceiling so a wide monitor can't yield a panel that swallows the chat. */ -const PREVIEW_PANEL_MAX_WIDTH_PX = 1400; -/** Fraction of the viewport allowed; the panel is min(this ยท vw, MAX_PX). */ +/** Fraction of the viewport allowed, preserving the remaining space for chat. */ const PREVIEW_PANEL_MAX_WIDTH_FRACTION = 0.7; const PREVIEW_PANEL_DEFAULT_WIDTH = 540; +export function getPreviewPanelMaxWidth(viewportWidth: number): number { + return Math.floor(viewportWidth * PREVIEW_PANEL_MAX_WIDTH_FRACTION); +} + /** * Shell for the preview panel. In inline mode the panel is user-resizable * via a drag handle on the left edge; width persists per browser. In @@ -82,5 +84,5 @@ function useViewportClampedMaxWidth(): number { if (frame !== 0) window.cancelAnimationFrame(frame); }; }, []); - return Math.min(PREVIEW_PANEL_MAX_WIDTH_PX, Math.floor(vw * PREVIEW_PANEL_MAX_WIDTH_FRACTION)); + return getPreviewPanelMaxWidth(vw); }