fix(readmymind): style the modal footer, point the empty-result copy at the steer note

The footer buttons shipped with class="btn btn-secondary/primary", but no
.btn or .btn-secondary rule exists in this codebase, so all four rendered
as unstyled UA buttons. Moved them to the btn-toolbar convention every
other modal footer uses, with a scoped flex-row footer rule (btn-toolbar
is display:flex, block-level) mirroring the runSummaryModal footer.

Send's accent needs a (0,4,0) re-assert: the skin block's bare
.btn-toolbar rule is (0,2,1) under html:not([data-skin="og"]) and beats
.btn-toolbar.btn-primary (0,2,0), the same specificity trap CLAUDE.md
documents for mobile.css. Scoped to this modal; the repo-wide greying of
btn-primary on non-OG skins is pre-existing and left as a design call.

The empty-result copy now points at the steer note sitting right below
it ("Add a steer note and Rethink to try again"), zh-CN updated.

Verified with the steer E2E (still green) plus desktop, phone (390px),
and error-phase screenshots; static guards extended to pin the footer
convention and the accent re-assert.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-08-10 11:15:47 +02:00
parent 831af88579
commit 29efd0e970
6 changed files with 57 additions and 12 deletions
+16
View File
@@ -89,4 +89,20 @@ describe('read my mind phone key + alternates (static guards)', () => {
// A fresh open resets the note along with the rethink memory.
expect(ui).toMatch(/steer\.value = ''/);
});
it('styles the footer with btn-toolbar (bare "btn btn-*" matches no CSS in this codebase)', () => {
const modal = html.slice(html.indexOf('id="readMyMindModal"'), html.indexOf('id="approvalsDrawer"'));
// The unstyled classes the footer originally shipped with must not return.
expect(modal).not.toMatch(/class="btn /);
expect(modal.match(/class="btn-toolbar/g)?.length).toBe(4);
expect(modal).toMatch(/class="btn-toolbar btn-primary"[^>]*sendReadMyMind\(true\)/);
// btn-toolbar is display:flex (block-level): without the desktop footer
// row rule the four buttons would stack vertically.
expect(styles).toMatch(/\.readmymind-modal \.modal-footer \{[^}]*display: flex/);
// The skin block's bare .btn-toolbar (0,2,1) greys out .btn-primary
// (0,2,0), so Send's accent must be re-asserted at higher specificity.
expect(styles).toMatch(/\.readmymind-modal \.modal-footer \.btn-toolbar\.btn-primary \{[^}]*var\(--accent\)/);
// The phone block sizes the same class for finger targets.
expect(phoneBlock).toMatch(/\.readmymind-modal \.modal-footer \.btn-toolbar/);
});
});