fix(ui): give the mobile refresh controls labels and full width

At <=640px the RAG "Sync sources" pill and the History "Refresh"
pill squeezed down to tiny icon-only buttons — hard to discover and
tap on a phone. They are now full-width labeled pills:

- the RAG page-head row wraps so the Sync pill drops below the
  "Knowledge base" title at full width; the History page-head
  already wrapped the pill below its title block
- the Sync label's min(16rem, 40vw) cap lifts on mobile (min-width: 0
  engages the ellipsis) so the live-file text truncates against the
  full width instead of the 40vw cap
- the Refresh glyph joins its visible label (it stays hidden on
  desktop, where the label carries the pill)

This matches the established mobile full-width pill language (New
chat / Share / stale-ban Regenerate). The three unit tests that
pinned the old icon-only CSS are updated to pin the new behavior.

tests/unit/test_frontend_sync_upload.py

@@ -380,8 +380,10 @@ def test_sync_label_css_ellipsis_truncation() -> None:
     """.sync-label: the live-file label ellipsizes a long
     source/relative/path inside the pill (A4) — inline-block with the
     min(16rem, 40vw) cap, overflow hidden, text-overflow ellipsis, no
-    wrap, baseline-aligned; the mobile squeeze's display:none override
-    (icon-only button) stays."""
+    wrap, baseline-aligned; on mobile the pill goes full width with
+    the label visible (the cap lifts, and min-width: 0 engages the
+    ellipsis against the full width — the icon-only squeeze is
+    gone)."""
     css = _css()
     block = re.search(r"\.sync-label\s*\{([^}]*)\}", css)
     assert block, "styles.css must style .sync-label"
@@ -397,8 +399,12 @@ def test_sync_label_css_ellipsis_truncation() -> None:
         assert prop in body, f".sync-label must carry {prop!r}"
     mobile = re.search(r"@media \(max-width: 640px\) \{([\s\S]*?)\n\}", css)
     assert mobile, "the ≤640px media query must stay"
-    assert ".sync-label { display: none; }" in mobile.group(1), (
-        "the mobile icon-only override must survive the ellipsis rule"
+    mbody = mobile.group(1)
+    assert ".sync-btn { width: 100%; }" in mbody, (
+        "the mobile Sync pill is full width (the icon-only squeeze is gone)"
+    )
+    assert ".sync-label { max-width: none; min-width: 0; }" in mbody, (
+        "the label stays visible and ellipsizes against the full width"
     )