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.

frontend/index.html

@@ -691,9 +691,10 @@
                page-head — OUTSIDE the table wrap — so it stays
                reachable while the empty state is showing. The house
                inline-SVG refresh glyph (aria-hidden) + the visible
-               "Refresh" label (the phase-46 auth-link convention:
-               label visible >=640px, icon-only below; the aria-label
-               keeps the accessible name in both). history.js binds it
+               "Refresh" label (visible at every width — below 640px
+               the pill goes full width and the glyph joins the
+               label; the aria-label keeps the accessible name in
+               both). history.js binds it
                in the admin branch (the view is admin-gated; anonymous
                sees the gate instead) and announces the outcome in
                #history-status. -->