Commit a7f6d97b94d2e12b10081760063768f715f87e96 | the-knife

author	Olivier Melcher <olivier.melcher@gmail.com> 2026-07-17 13:40:24-05:00
committer	GitHub <noreply@github.com> 2026-07-17 18:40:24+00:00
log	a7f6d97b94d2e12b10081760063768f715f87e96
tree	00951ca4ef1bccc03c3ec733da580981761ce9a4
parent	f9a4f59930ab9931d8e92f6ebee69ee0cbc2cad2
signature	Signed by PGP key B5690EEEBB952194

2 files changed, 19 insertions(+), 4 deletions(-)

apps/web/src/components/preview/PreviewPanelShell.test.ts created+13

...	@@ -0,0 +1,13 @@
1	import { describe, expect, it } from "vite-plus/test";
2
3	import { getPreviewPanelMaxWidth } from "./PreviewPanelShell";
4
5	describe("getPreviewPanelMaxWidth", () => {
6	it("allows the panel to use 70% of an ultra-wide viewport without a pixel ceiling", () => {
7	expect(getPreviewPanelMaxWidth(6_000)).toBe(4_200);
8	});
9
10	it("rounds fractional CSS pixels down", () => {
11	expect(getPreviewPanelMaxWidth(2_001)).toBe(1_400);
12	});
13	});

apps/web/src/components/preview/PreviewPanelShell.tsx+6-4

 @@ -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. */
+/** Fraction of the viewport allowed, preserving the remaining space for chat. */
-const PREVIEW_PANEL_MAX_WIDTH_PX = 1400;
-/** Fraction of the viewport allowed; the panel is min(this · vw, MAX_PX). */
 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);
 }