fix(web): chat stays centered while the thread details card fits beside it

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 });

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,