Experimental/brain-of-reese
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
ducoterra
2026-09-07 14:16:41 -04:00
parent 7fce6572d0
commit f664aafeed
5 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/styles.css
+16 -13
View File
@@ -2259,8 +2259,8 @@ details.thinking .thinking-text ul { margin: 0 0 0.5rem; }
.history-refresh:hover { background: #f55a72; color: var(--bg); }
.history-refresh:disabled { opacity: 0.6; cursor: wait; }
/* The refresh glyph is hidden on desktop (the label carries the
pill); it is the whole control below 640px (the <=640 block
mirrors the phase-46 auth-link icon-only convention). */
pill); below 640px it joins the visible label in the full-width
pill (the <=640 block — the icon-only squeeze is gone). */
.history-refresh svg { width: 16px; height: 16px; display: none; }
/* ---------- History page (phase 50) ----------
@@ -3663,17 +3663,20 @@ details.thinking .thinking-text ul { margin: 0 0 0.5rem; }
.shared-note { font-size: 0.88rem; }
.footer-inner { flex-direction: column; gap: 0.2rem; text-align: center; }
main { padding-bottom: env(safe-area-inset-bottom, 0); }
/* Sync button goes icon-only on mobile; the label hides, aria-label
keeps the accessible name. The spinning icon is the visible running
state on a touch screen. */
.sync-btn { padding: 0.4rem 0.3rem; }
.sync-label { display: none; }
/* Phase 77 task 03: the History refresh pill goes icon-only like
the phase-46 auth pill (the aria-label keeps the accessible
name); the page-head row above wraps the pill below the title
block when the width runs out. */
.history-refresh { padding: 0.4rem 0.3rem; }
.history-refresh-label { display: none; }
/* Sync + History refresh: full-width LABELED pills on mobile (the
icon-only squeeze is gone — a symbol-only control is too small a
target to discover on a phone). The RAG page-head row wraps so
the Sync pill drops below the "Knowledge base" title at full
width; the History page-head already wraps the pill below its
title block. The Sync label's min(16rem, 40vw) cap lifts so the
live-file text ellipsizes against the FULL width (min-width: 0
lets the nowrap flex item shrink, which is what engages the
ellipsis); the refresh glyph joins its visible label. The
aria-labels keep the accessible names. */
.page-head-row { flex-wrap: wrap; }
.sync-btn { width: 100%; }
.sync-label { max-width: none; min-width: 0; }
.history-refresh { width: 100%; }
.history-refresh svg { display: block; }
.sync-result {
position: absolute !important;