fix: center bottom composer between sidebar and teachers

tests/e2e/community-welcome.spec.ts

@@ -69,7 +69,8 @@ for (const width of [375, 768, 1280, 1470]) {
     await expect(composer).toBeInViewport({ ratio: 1 });
     const box = (await composer.boundingBox())!;
     expect(850 - box.y - box.height).toBeLessThanOrEqual(40);
-    expect((await page.getByTestId('community-invitation').boundingBox())!.y).toBeLessThan(box.y);
+    const invitation = (await page.getByTestId('community-invitation').boundingBox())!;
+    expect(box.y - invitation.y - invitation.height).toBeCloseTo(12, 0);
     await page.screenshot({ path: test.info().outputPath(`community-welcome-${width}.png`) });
   });
 }
@@ -80,12 +81,49 @@ test('a short window scrolls the welcome while keeping the composer at the botto
   const composer = page.getByTestId('coding-message-composer');
   await expect(composer).toBeInViewport({ ratio: 1 });
   const before = (await composer.boundingBox())!;
-  await page.getByTestId('community-invitation').scrollIntoViewIfNeeded();
+  await page.locator('.classroom-chat-view').evaluate(el => { el.scrollTop = el.scrollHeight; });
   const after = (await composer.boundingBox())!;
   expect(after.y).toBeCloseTo(before.y, 0);
   expect(600 - after.y - after.height).toBeLessThanOrEqual(40);
 });
 
+for (const width of [1280, 1470]) {
+  test(`the bottom input is centered between the project sidebar and fixed teacher panel at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 850 });
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    await page.goto(baseUrl + '?teachers&sidebar');
+    const teachers = page.getByTestId('teacher-welcomes');
+    const composer = page.getByTestId('coding-message-composer');
+    await expect(teachers).toHaveCSS('width', '340px');
+    await expect.poll(async () => {
+      const [side, teacher, input] = await Promise.all([
+        page.getByTestId('project-sidebar').boundingBox(), teachers.boundingBox(), composer.boundingBox(),
+      ]);
+      return Math.abs((input!.x + input!.width / 2) - (side!.x + side!.width + teacher!.x) / 2);
+    }).toBeLessThan(2);
+    const input = (await composer.boundingBox())!;
+    const invitation = (await page.getByTestId('community-invitation').boundingBox())!;
+    expect(invitation.x).toBeCloseTo(input.x, 0);
+    expect(invitation.width).toBeCloseTo(input.width, 0);
+    expect(input.y - invitation.y - invitation.height).toBeCloseTo(12, 0);
+    await page.screenshot({ path: test.info().outputPath(`composer-between-panels-${width}.png`) });
+    await composer.getByRole('textbox').fill('保留这份草稿');
+    await page.getByTestId('project-sidebar').evaluate(el => { el.style.width = '60px'; });
+    await expect.poll(async () => {
+      const [side, teacher, input] = await Promise.all([
+        page.getByTestId('project-sidebar').boundingBox(), teachers.boundingBox(), composer.boundingBox(),
+      ]);
+      return Math.abs(input!.x + input!.width / 2 - (side!.x + side!.width + teacher!.x) / 2);
+    }).toBeLessThan(2);
+    await teachers.getByRole('button', { name: '先自己试试' }).click();
+    await expect(composer.getByRole('textbox')).toHaveValue('保留这份草稿');
+    await expect.poll(async () => {
+      const [side, input] = await Promise.all([page.getByTestId('project-sidebar').boundingBox(), composer.boundingBox()]);
+      return Math.abs(input!.x + input!.width / 2 - (side!.x + side!.width + width) / 2);
+    }).toBeLessThan(2);
+  });
+}
+
 test('the community link opens only on click and leaves the draft mounted', async ({ page }) => {
   await page.setViewportSize({ width: 1280, height: 850 });
   const communityRequests: string[] = [];