The chat window fits the screen, and the header stops asking questions

The message log had a fixed 62vh height, so the card was head + panels +
log + composer tall and the input fell off the bottom of the screen. The
card is now sized to the viewport and the log is the only part that
flexes: opening the invite or member panel shrinks the scroll area
instead of pushing the composer out of reach.

Three header changes, all the same idea — don't show a control for a
choice nobody is making:

  '+' becomes 'Add person', because a plus sign doesn't say what it adds.

  A lone channel isn't named at all. '#general' next to a composer that
  says 'Message #general' points at a choice of one; several channels
  become a select, which is what a choice looks like.

  The new-channel field hides behind a 'New channel' button. Sitting open
  right after you create a community, it reads as something you're
  supposed to fill in.

tools/chat-layout-test.js holds the line at three viewport sizes with
both panels open, and covers the header behaviour through actually
adding a second channel.

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

1 files changed, 133 insertions, 0 deletions

diff --git a/tools/chat-layout-test.js b/tools/chat-layout-test.js
new file mode 100644
index 0000000..ef86291
--- /dev/null
+++ b/tools/chat-layout-test.js
@@ -0,0 +1,133 @@
+// You must always be able to type. The chat card is sized to the viewport and
+// only the message log flexes, so the header, an open invite or member panel,
+// and a long backlog all shrink the scroll area rather than pushing the
+// composer below the fold.
+//
+// Run: bun tools/chat-layout-test.js
+import puppeteer from 'puppeteer-core';
+import { generateMnemonic } from '@scure/bip39';
+import { wordlist } from '@scure/bip39/wordlists/english';
+import { buildHtml } from '../build.js';
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+let ok = true;
+const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; };
+
+const html = await buildHtml({ minify: true, pwa: false });
+const server = Bun.serve({ port: 5229, fetch: () => new Response(html, { headers: { 'content-type': 'text/html' } }) });
+const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] });
+const page = await browser.newPage();
+const click = (sel, t) => page.evaluate((s, x) => { const e = [...document.querySelectorAll(s)].find((n) => n.textContent.trim().toLowerCase().includes(x.toLowerCase())); if (e) { e.click(); return true; } return false; }, sel, t);
+const setInput = (sel, v) => page.evaluate((s, val) => { const e = document.querySelector(s); if (!e) return false; e.value = val; e.dispatchEvent(new Event('input', { bubbles: true })); return true; }, sel, v);
+const waitText = async (x, ms = 25000) => { for (let i = 0; i < ms / 250; i++) { if ((await page.evaluate(() => document.body.innerText)).toLowerCase().includes(x.toLowerCase())) return true; await sleep(250); } return false; };
+
+// Is the composer fully inside the window, without scrolling?
+const composerFits = () => page.evaluate(() => {
+  const c = document.querySelector('.chat-compose');
+  if (!c) return { found: false };
+  const r = c.getBoundingClientRect();
+  return { found: true, top: Math.round(r.top), bottom: Math.round(r.bottom), vh: window.innerHeight, fits: r.bottom <= window.innerHeight && r.top >= 0 };
+});
+
+try {
+  for (const vp of [{ width: 1280, height: 800, name: 'laptop' }, { width: 390, height: 844, name: 'phone' }, { width: 1024, height: 600, name: 'short laptop' }]) {
+    console.log(`\n[${vp.name} ${vp.width}x${vp.height}]`);
+    await page.setViewport({ width: vp.width, height: vp.height });
+    if (vp.name === 'laptop') {
+      await page.goto('http://localhost:5229/', { waitUntil: 'domcontentloaded' });
+      await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest'));
+      await page.reload({ waitUntil: 'domcontentloaded' });
+      await sleep(400);
+      await click('button', 'I already have a wallet');
+      await sleep(300);
+      await click('button', 'Import existing');
+      await sleep(300);
+      await page.waitForSelector('textarea');
+      await page.type('textarea', generateMnemonic(wordlist));
+      await click('button', 'Open wallet');
+      await waitText('receive', 15000);
+      await page.evaluate(() => document.querySelector('.header-msgs')?.click());
+      await sleep(800);
+      await click('button', 'Create');
+      await sleep(300);
+      await setInput('input[placeholder*="name" i]', 'layout test');
+      await sleep(200);
+      await page.evaluate(() => { const i = document.querySelector('input[placeholder*="name" i]'); const b = i && i.parentElement.querySelector('button'); if (b) b.click(); });
+      await waitText('layout test', 25000);
+      await click('.item', 'layout test');
+      await sleep(2000);
+    }
+    await sleep(600);
+
+    let r = await composerFits();
+    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 sleep(600);
+    const panelOpen = await page.$('.chat-invite');
+    r = await composerFits();
+    check('...and still on screen with the invite panel open', !!panelOpen && r.fits, `bottom ${r.bottom} of ${r.vh}`);
+
+    // and with the member list open too
+    await page.evaluate(() => { const e = [...document.querySelectorAll('.chat-head .col')].find((n) => n.className.includes('clickable')); if (e) e.click(); });
+    await sleep(600);
+    r = await composerFits();
+    check('...and with the member list open as well', r.fits, `bottom ${r.bottom} of ${r.vh}`);
+
+    // NB not asserting the page never scrolls: the footer legitimately sits
+    // below the fold. What matters is that the composer doesn't.
+
+    // 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 sleep(300);
+  }
+  await page.setViewport({ width: 1280, height: 800 });
+  await sleep(500);
+  await page.screenshot({ path: '/tmp/claude-1000/-home-adam-halwallet/11ef6049-3f7a-4687-a8e8-79c6f9403a6b/scratchpad/chat-layout.png' });
+
+  console.log('\n[the channel header]');
+  const one = await page.evaluate(() => ({
+    picker: !!document.querySelector('.chan-pick'),
+    named: document.body.innerText.includes('#general'),
+    placeholder: (document.querySelector('#msg-draft') || {}).placeholder,
+  }));
+  check('a single channel is not named', !one.picker && !one.named, JSON.stringify(one));
+  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 sleep(600);
+  const gated = await page.evaluate(() => ({
+    field: !!document.querySelector('input[placeholder*="channel" i]'),
+    button: [...document.querySelectorAll('.chat-invite button')].some((b) => /new channel/i.test(b.textContent)),
+  }));
+  check('the naming field is not just sitting there', !gated.field, JSON.stringify(gated));
+  check('there is a New channel button instead', gated.button);
+
+  await click('.chat-invite button', 'New channel');
+  await sleep(500);
+  check('which reveals the field', !!(await page.$('input[placeholder*="channel" i]')));
+  await setInput('input[placeholder*="channel" i]', 'random');
+  await sleep(200);
+  await page.evaluate(() => { const i = document.querySelector('input[placeholder*="channel" i]'); const b = i && i.parentElement.querySelector('button'); if (b) b.click(); });
+
+  for (let i = 0; i < 60 && !(await page.$('.chan-pick')); i++) await sleep(500);
+  const two = await page.evaluate(() => {
+    const sel = document.querySelector('.chan-pick');
+    return { picker: !!sel, tag: sel && sel.tagName, opts: sel ? [...sel.options].map((o) => o.textContent) : [], field: !!document.querySelector('input[placeholder*="channel" i]') };
+  });
+  check('two channels become a select', two.picker && two.tag === 'SELECT' && two.opts.length === 2, JSON.stringify(two.opts));
+  check('and the naming field puts itself away', !two.field);
+  const r2 = await composerFits();
+  check('composer still on screen', r2.fits, `bottom ${r2.bottom} of ${r2.vh}`);
+} catch (e) {
+  check('run completed', false, e.message);
+} finally {
+  await browser.close();
+  server.stop(true);
+}
+console.log(ok ? '\n✅ the composer stays put' : '\n❌ failures above');
+process.exit(ok ? 0 : 1);