Chat header: Add person is an icon. Adam's screenshot of the Bitcoin Community header: "Add person" wrapped onto two lines in a box twice the height of the bell and the door beside it. It is now a person with a plus, the same size and stroke as those (and lit while its panel is open), with "Add person" as its label and tooltip — in a community's header and a private group's. The form's own Add person button keeps its words. chat-layout-test finds the button by its label too; SHOT_PHONE=path saves the phone-width header.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt

1 files changed, 4 insertions, 3 deletions

diff --git a/tools/chat-layout-test.js b/tools/chat-layout-test.js
index a6f4162..7c79858 100644
--- a/tools/chat-layout-test.js
+++ b/tools/chat-layout-test.js
@@ -70,7 +70,7 @@ try {
     check('composer is on screen', r.found && r.fits, `bottom ${r.bottom} of ${r.vh}`);
 
     // the state from the report: the invite panel open above the log
-    await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent)); if (b) b.click(); });
+    await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent + ' ' + (e.getAttribute('aria-label') || ''))); if (b) b.click(); });
     await sleep(600);
     const panelOpen = await page.$('.chat-invite');
     r = await composerFits();
@@ -96,7 +96,7 @@ try {
     // put it back for the next viewport
     await page.evaluate(() => { const e = [...document.querySelectorAll('.chat-head .col')].find((n) => n.className.includes('clickable')); if (e) e.click(); });
     await sleep(300);
-    await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent)); if (b) b.click(); });
+    await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent + ' ' + (e.getAttribute('aria-label') || ''))); if (b) b.click(); });
     await sleep(300);
 
     const pinned = await page.evaluate(() => {
@@ -117,6 +117,7 @@ try {
     });
     check('a long message history scrolls with the name and composer pinned', pinned);
   }
+  if (process.env.SHOT_PHONE) await page.screenshot({ path: process.env.SHOT_PHONE }); // the phone-width header
   await page.setViewport({ width: 1280, height: 800 });
   await sleep(500);
   await page.screenshot({ path: shotPath });
@@ -131,7 +132,7 @@ try {
   check('and the composer says just "Message"', /^Message/.test(one.placeholder || '') && !/#/.test(one.placeholder || ''), one.placeholder);
 
   console.log('\n[adding a channel]');
-  await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent)); if (b) b.click(); });
+  await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent + ' ' + (e.getAttribute('aria-label') || ''))); if (b) b.click(); });
   await sleep(600);
   const gated = await page.evaluate(() => ({
     field: !!document.querySelector('input[placeholder*="channel" i]'),