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>

2 files changed, 24 insertions, 14 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} />`)}
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index f9dc3d8..539ac12 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2735,10 +2735,9 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .transfer-head {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 4px 8px;
+  gap: 8px;
   font-weight: 600;
   font-size: 0.85em;
   color: var(--text);
@@ -5391,18 +5390,24 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
      and go pushes every row under it. */
   white-space: nowrap;
 }
-/* Title, summary and this button do not fit 330 px in French, and every row
-   below truncates rather than scrolls: the button takes a line of its own,
-   still on the right, instead of pushing the panel into a sideways scroll. */
-.transfer-head .btn-secondary { margin-left: auto; }
 .transfer-group + .transfer-group { border-top: 1px solid var(--border); }
 .transfer-group-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: .35rem .6rem .2rem;
   font-size: .78em;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--text-dim);
 }
+/* A button, not a label: none of the head's small capitals. */
+.transfer-group-head .btn-secondary {
+  text-transform: none;
+  letter-spacing: normal;
+  font-size: 1.05em;
+  padding: 2px 8px;
+}
 /* Finished rows recede rather than disappear: somebody who just downloaded
    three files wants to see that all three are there. */
 .transfer-item.transfer-done .transfer-name,