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

3 files changed, 48 insertions, 22 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index ed16f76..8fbc27a 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -462,6 +462,7 @@ export function messagesFeature(ctx) {
     const ok = await publishOn(room.relays, wrap);
     if (!ok) { toast(t('msgSendFailed')); return; }
     ui.msgNewChannel = '';
+    ui.msgChannelPanel = false; // the field has done its job — put it away
     toast('#' + name.replace(/^#/, ''));
   }
 
@@ -1494,13 +1495,14 @@ export function messagesFeature(ctx) {
               memberCount ? t('msgMembers', { n: memberCount }) : t('msgEncrypted'),
               onlineCount ? h('span', { class: 'online-count' }, ' · ', t('msgNOnline', { n: onlineCount })) : null))),
         h('div', { class: 'row gap6', style: 'align-items:center' },
+          // One channel needs no label — naming it only asks people to notice a
+          // choice they don't have. Several become a picker.
           chans.length > 1
-            ? h('div', { class: 'seg' }, chans.map((c) =>
-                h('button', {
-                  class: c.id === ch?.id ? 'active' : '',
-                  onClick: () => { ui.msgChannel = c.id; ui.msgStick = true; subChannel(room, c.id); render(); },
-                }, '#' + c.name)))
-            : h('div', { class: 'tag' }, '#' + (ch ? ch.name : '')),
+            ? h('select', {
+                class: 'chan-pick',
+                onChange: (e) => { ui.msgChannel = e.target.value; ui.msgStick = true; subChannel(room, e.target.value); render(); },
+              }, chans.map((c) => h('option', { value: c.id, selected: c.id === ch?.id }, '#' + c.name)))
+            : null,
           h('button', {
             class: 'iconbtn bell' + (roomNotify(jm.community_id) ? ' on' : ''),
             title: roomNotify(jm.community_id) ? t('msgNotifyOn') : t('msgNotifyOff'),
@@ -1510,9 +1512,9 @@ export function messagesFeature(ctx) {
               : '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13.7 21a2 2 0 0 1-3.4 0"/><path d="M18 8a6 6 0 0 0-9.3-5"/><path d="M6.3 6.3A6 6 0 0 0 6 8c0 7-3 9-3 9h15"/><path d="m2 2 20 20"/></svg>',
           }),
           h('button', {
-            class: 'iconbtn', title: t('msgInviteTitle'),
+            class: 'btn-sm', title: t('msgInviteTitle'),
             onClick: () => { ui.msgInvitePanel = !ui.msgInvitePanel; render(); },
-          }, '+'))),
+          }, t('msgAddPerson')))),
       ui.msgInvitePanel ? invitePanel(room) : null,
       ui.msgMembers ? memberPanel(room, members) : null,
       h('div', {
@@ -1524,7 +1526,7 @@ export function messagesFeature(ctx) {
       }, ...(ch ? messageRows(room, ch.id) : [])),
       ch ? typingLine(room, ch.id) : null,
       composer(
-        t('msgPlaceholder', { channel: ch ? ch.name : '' }),
+        chans.length > 1 ? t('msgPlaceholder', { channel: ch ? ch.name : '' }) : t('msgPlaceholderPlain'),
         () => ch && sendMessage(room, ch.id),
         () => ch && ping(room, ch.id, TYPING)));
   }
@@ -1580,14 +1582,24 @@ export function messagesFeature(ctx) {
           class: 'btn-sm',
           onClick: () => { sendDirectInvite(room, ui.msgInviteTo); ui.msgInviteTo = ''; render(); },
         }, t('msgSend'))),
-      // owners can add channels (an owner-signed control edition)
+      // Owners can add channels (an owner-signed control edition), but a naming
+      // field sitting open is a question nobody asked — it reads as something
+      // you're meant to fill in right after making a community.
       myPubkeys().includes(room.jm.owner)
-        ? h('div', { class: 'row gap6' },
-            h('input', {
-              class: 'grow', type: 'text', placeholder: t('msgChannelPlaceholder'), maxlength: '64',
-              value: ui.msgNewChannel || '', onInput: (e) => { ui.msgNewChannel = e.target.value; },
-            }),
-            h('button', { class: 'btn-sm', onClick: () => createChannel(room, ui.msgNewChannel) }, t('msgCreate')))
+        ? (ui.msgChannelPanel
+            ? h('div', { class: 'row gap6' },
+                h('input', {
+                  class: 'grow', type: 'text', placeholder: t('msgChannelPlaceholder'), maxlength: '64',
+                  value: ui.msgNewChannel || '', onInput: (e) => { ui.msgNewChannel = e.target.value; },
+                  onKeydown: (e) => { if (e.key === 'Enter') createChannel(room, ui.msgNewChannel); },
+                }),
+                h('button', { class: 'btn-sm', onClick: () => createChannel(room, ui.msgNewChannel) }, t('msgCreate')),
+                h('button', { class: 'btn-ghost btn-sm', onClick: () => { ui.msgChannelPanel = false; render(); } }, t('cancel')))
+            : h('div', { class: 'row' },
+                h('button', {
+                  class: 'btn-sm',
+                  onClick: () => { ui.msgChannelPanel = true; render(); },
+                }, t('msgNewChannel'))))
         : null,
       // leaving discards the keys on this identity — two taps, default community exempt
       builtin ? null : h('div', { class: 'row' },
diff --git a/src/i18n.js b/src/i18n.js
index 428ccb0..b5a64af 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -152,8 +152,11 @@ const STR = {
     msgSend: 'Send',
     msgEmpty: 'No messages yet — say hi!',
     msgPlaceholder: 'Message #{channel}',
+    msgPlaceholderPlain: 'Message…',
     msgMembers: '{n} members',
     msgEncrypted: 'End-to-end encrypted',
+    msgAddPerson: 'Add person',
+    msgNewChannel: 'New channel',
     msgAdmin: 'admin',
     msgEdited: '(edited)',
     msgDelete: 'Delete message',
diff --git a/src/style.css b/src/style.css
index 759ee61..5d98aa1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -314,11 +314,21 @@ hr.divider { margin: 16px 0; }
 .sel-ico svg { display: block; }
 
 /* Messages — Concord community chat. */
-.chat-card { padding: 0; overflow: hidden; }
-.chat-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
+/* The composer must never be below the fold. The card is sized to the
+   viewport and the message log is the only part that flexes, so opening the
+   invite or member panel shrinks the scroll area instead of pushing the input
+   off the bottom of the screen. The subtracted space is what sits around the
+   card: #app's padding plus the brand header and its gap. */
+.chat-card {
+  padding: 0; overflow: hidden; display: flex; flex-direction: column;
+  height: calc(100vh - 144px); max-height: calc(100vh - 144px);
+  height: calc(100dvh - 144px); max-height: calc(100dvh - 144px);
+  min-height: 320px;
+}
+.chat-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
 .chat-title { font-weight: 650; }
 .chat-log {
-  height: min(62vh, 640px); overflow-y: auto; padding: 12px 14px;
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px;
   display: flex; flex-direction: column; gap: 10px; background: var(--surface2);
 }
 .chat-row { display: flex; gap: 9px; align-items: flex-start; }
@@ -361,7 +371,7 @@ hr.divider { margin: 16px 0; }
 }
 .chat-compose {
   display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line);
-  align-items: center;
+  align-items: center; flex: 0 0 auto;
 }
 .chat-compose input {
   flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--paper);
@@ -373,7 +383,7 @@ hr.divider { margin: 16px 0; }
 .chat-back { font-size: 22px; line-height: 1; padding: 2px 10px 4px; flex-shrink: 0; }
 .chat-thread-row { display: flex; gap: 10px; align-items: center; cursor: pointer; }
 .chat-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.chat-invite { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface2); }
+.chat-invite { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface2); flex: 0 0 auto; max-height: 40vh; overflow-y: auto; }
 .chat-invite input { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 10px; min-width: 0; }
 .chat-row.dm { justify-content: flex-start; }
 .chat-row.dm.mine { justify-content: flex-end; }
@@ -401,7 +411,7 @@ hr.divider { margin: 16px 0; }
 .typing-dots i:nth-child(2) { animation-delay: .15s; }
 .typing-dots i:nth-child(3) { animation-delay: .3s; }
 @keyframes typing-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
-.chat-members { max-height: 260px; overflow-y: auto; border-bottom: 1px solid var(--line); }
+.chat-members { flex: 0 0 auto; max-height: min(260px, 40vh); overflow-y: auto; border-bottom: 1px solid var(--line); }
 .ava-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
 .ava-wrap.online::after {
   content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
@@ -557,3 +567,4 @@ body::after {
 .balance-move .amt-field { flex: 1 1 150px; }
 .balance-move .input-group > button { flex: 1 1 150px; }
 .chat-signer-off { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); }
+.chan-pick { width: auto; min-width: 0; padding: 6px 32px 6px 10px; font-size: 13px; font-weight: 600; border-radius: 9px; background-position: right 10px center; }