fix(hub): stop the transfers panel scrolling sideways

The header (title, summary, clear button) overflowed the 330 px panel in
French. Let it wrap, with a gap, and hide horizontal overflow.

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

1 files changed, 7 insertions, 1 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 21d92df..f9dc3d8 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2725,6 +2725,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   width: 330px;
   max-height: 60vh;
   overflow-y: auto;
+  overflow-x: hidden;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 8px;
@@ -2734,8 +2735,10 @@ 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;
   font-weight: 600;
   font-size: 0.85em;
   color: var(--text);
@@ -5381,7 +5384,6 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
 .transfer-head-title { font-weight: 600; }
 .transfer-head-summary {
   margin-left: auto;
-  margin-right: .5rem;
   font-size: .85em;
   color: var(--text-dim);
   /* Never wraps to a second line: it is the one part of the header that grows
@@ -5389,6 +5391,10 @@ 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 {
   padding: .35rem .6rem .2rem;