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.
This commit is contained in:
@@ -721,9 +721,9 @@ def test_history_refresh_button_css_reuses_the_new_chat_language() -> None:
|
||||
hidden on desktop (the label carries the pill) — and the global
|
||||
:focus-visible ring applies (no button-scoped focus override).
|
||||
The page-head flex row is SCOPED to #view-history (the other four
|
||||
views' page-heads are untouched). Below 640px the pill goes
|
||||
icon-only (the phase-46 auth-link convention — the aria-label
|
||||
keeps the accessible name)."""
|
||||
views' page-heads are untouched). Below 640px the pill goes full
|
||||
width with the label visible (the icon-only squeeze is gone —
|
||||
the glyph joins the label)."""
|
||||
css = _asset("styles.css")
|
||||
block = re.search(r"\.history-refresh \{([\s\S]*?)\n\}", css)
|
||||
assert block, "styles.css must style .history-refresh"
|
||||
@@ -746,11 +746,11 @@ def test_history_refresh_button_css_reuses_the_new_chat_language() -> None:
|
||||
mobile = re.search(r"@media \(max-width: 640px\) \{([\s\S]*?)\n\}\n", css)
|
||||
assert mobile, "the 640px media query must exist"
|
||||
mbody = mobile.group(1)
|
||||
assert ".history-refresh-label { display: none; }" in mbody, (
|
||||
"icon-only below 640px (the phase-46 convention)"
|
||||
assert ".history-refresh { width: 100%; }" in mbody, (
|
||||
"full width below 640px (the icon-only squeeze is gone)"
|
||||
)
|
||||
assert ".history-refresh svg { display: block; }" in mbody, (
|
||||
"the glyph is the whole control below 640px"
|
||||
"the glyph joins the visible label below 640px"
|
||||
)
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user