fix(hub): move "clear finished" into the finished group's head

9269374 let the transfers header wrap, which broke the one-line header
test_layout_measured enforces. The button now sits beside what it clears,
and the header is title and summary only.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 13 insertions, 8 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index bdab271..c1913c0 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -228,18 +228,23 @@ function TransferWidget() {
                   running: running.length, waiting: waiting.length })}
               </span>
             `}
-            ${finished.length > 0 && html`
-              <button class="btn-secondary"
-                onClick=${() => transfers.clearFinished()}>
-                ${t('transfers.clear')}
-              </button>
-            `}
           </div>
           ${groups.map(([label, rows]) => html`
             <div class="transfer-group" key=${label}>
-              ${groups.length > 1 && html`
+              ${/* The finished group always gets its head, because clearing it
+                    lives there. It used to sit in the panel header, where the
+                    title, the summary and the button together outgrow the
+                    panel in French and on a phone: the header either scrolled
+                    the panel sideways or wrapped and changed height. */''}
+              ${(groups.length > 1 || label === 'finished') && html`
                 <div class="transfer-group-head">
-                  ${t('transfers.group_' + label, { n: rows.length })}
+                  <span>${t('transfers.group_' + label, { n: rows.length })}</span>
+                  ${label === 'finished' && html`
+                    <button class="btn-secondary"
+                      onClick=${() => transfers.clearFinished()}>
+                      ${t('transfers.clear')}
+                    </button>
+                  `}
                 </div>
               `}
               ${rows.map(it => html`<${TransferRow} it=${it} key=${it.id} />`)}