diff --git a/apps/web/src/components/chat/chatCanvasLayout.test.ts b/apps/web/src/components/chat/chatCanvasLayout.test.ts index 10c0652f9011e..0a62861eacbe0 100644 --- a/apps/web/src/components/chat/chatCanvasLayout.test.ts +++ b/apps/web/src/components/chat/chatCanvasLayout.test.ts @@ -102,17 +102,16 @@ describe("chat canvas layout", () => { }); expect(result.frame).toEqual({ x: 1260, y: 351, width: 240, height: 365 }); expect(result.overlapsDetailsCard).toBe(false); - expect(result.chat).toEqual({ left: 330, width: 736, insetStart: 0, insetEnd: 188 }); + expect(result.chat).toEqual({ left: 424, width: 736, insetStart: 0, insetEnd: 0 }); }); - it("centers the chat beside a details card it would crowd", () => { + it("moves the chat left only as far as a details card it would crowd requires", () => { const { chat } = resolveChatCanvasLayout({ container: { width: 1344, height: 988 }, maxChatWidth: 736, detailsCard: { left: 1052, right: 1332, bottom: 339 }, preview: null, }); - // Equal space on both sides of the chat. - expect(chat).toMatchObject({ left: (1052 - 736) / 2, width: 736 }); + expect(chat).toMatchObject({ left: 1052 - 32 - 736, width: 736 }); }); it("keeps the chat canvas-centered when it clears the details card", () => { const result = resolveChatCanvasLayout({ @@ -255,7 +254,7 @@ describe("chat canvas layout", () => { const compact = layout(460); expect(compact.frame!.x + compact.frame!.width).toBe(1572); expect(compact.frame!.width).toBe(460); - expect(compact.chat.left).toBe(330); + expect(compact.chat.left).toBe(364); expect(compact.overlapsDetailsCard).toBe(true); expect(density(compact)).toBe("compact"); expectClear(compact); @@ -295,6 +294,9 @@ describe("workspace card beside chat", () => { detailsCard: { left: width - 292, right: width - 12, bottom: 400 }, preview: player, }); + it("keeps chat centered while the card fits beside it", () => { + expect(withCard(1500).chat).toEqual({ left: 382, width: 736, insetStart: 0, insetEnd: 0 }); + }); it("narrows chat only after it reaches the left padding", () => { expect(withCard(1108).chat).toMatchObject({ left: 48, width: 736 }); expect(withCard(1028).chat).toEqual({ left: 48, width: 656, insetStart: 0, insetEnd: 276 }); diff --git a/apps/web/src/components/chat/chatCanvasLayout.ts b/apps/web/src/components/chat/chatCanvasLayout.ts index 115dace32dfb2..77e276ee817f4 100644 --- a/apps/web/src/components/chat/chatCanvasLayout.ts +++ b/apps/web/src/components/chat/chatCanvasLayout.ts @@ -46,22 +46,7 @@ export function resolveChatCanvasLayout({ : container.width - padding; const normalWidth = Math.max(0, Math.min(centeredWidth, laneRight - padding)); const canvasCenterLeft = (container.width - normalWidth) / 2; - // Beside a card it would crowd, the chat centers between the card and the canvas edge. The shift - // eases to zero as clearance grows, so very wide windows keep the chat still and a resize - // never jumps it. - const besideShift = detailsCard - ? Math.min( - (container.width - detailsCard.left) / 2, - Math.max( - 0, - (container.width - detailsCard.left) / 2 - (laneRight - canvasCenterLeft - normalWidth), - ), - ) - : 0; - const normalLeft = Math.max( - padding, - Math.min(canvasCenterLeft - besideShift, laneRight - normalWidth), - ); + const normalLeft = Math.max(padding, Math.min(canvasCenterLeft, laneRight - normalWidth)); let chat = { left: normalLeft, width: normalWidth,