From a7f6d97b94d2e12b10081760063768f715f87e96 Mon Sep 17 00:00:00 2001 From: Olivier Melcher Date: Fri, 17 Jul 2026 13:40:24 -0500 Subject: [PATCH] Allow preview panel to grow on wide displays (#4044) --- .../components/preview/PreviewPanelShell.test.ts | 13 +++++++++++++ .../src/components/preview/PreviewPanelShell.tsx | 10 ++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 apps/web/src/components/preview/PreviewPanelShell.test.ts 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 0000000000000000000000000000000000000000..4ac086157a2f8e41d2f2e067414c98a349017531 --- /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 6de828c1e63e2ce58b88aaec0cd92f7e54a8089a..a12c23e386bb77e08a62e78d4e7af36eb5744587 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); } -- 2.54.0