fix(pay): render the copy button beside the anchor with real styling

The copy fields survived save and sanitization, but the frontend never showed
a working copy button: the remark button was emitted as a bare sibling inside
a column flex list, and .resource-download-box__btn--extract had no CSS rule at
all, so it rendered as an unstyled full-width block stacked under the download
anchor instead of the side-by-side row the reference theme uses.

Wrap the anchor and the copy button in .resource-download-box__row and give the
extract modifier real styles (dashed outline, muted surface, focus-color hover),
including the scoped mobile download bar variant.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-09-24 20:57:32 +08:00
co-authored by Claude Sonnet 4.6
parent 592bfb4fa2
commit bd3d50c6c6
3 changed files with 100 additions and 19 deletions
@@ -52,6 +52,16 @@ test('the download box renders direct anchors with inline extract codes', () =>
assert.match(box, /\$btn_text = \$label;/);
assert.match(box, /resource-download-box__btn--custom/);
// The copy button must sit beside the anchor (not stacked full-width below it)
// and must carry live clipboard attributes the delegated runtime can act on.
assert.match(box, /<div class="resource-download-box__row">/);
assert.match(box, /resource-download-box__btn--extract/);
const css = read('assets/css/frontend/resource-meta/part.css');
assert.match(css, /\.resource-download-box__row \{[\s\S]*?display:\s*flex;/);
assert.match(css, /\.resource-download-box__btn--extract \{/);
// Mobile download bar scopes its own copy-button rule.
assert.match(css, /\.resource-mobile-download-bar \.resource-download-box__btn--extract \{/);
// The login gate keeps its own anchor.
assert.match(box, /\$btn_href = \$login_url;/);
});