#260: .swapbtn grid for copy feedback (fix attempt 2)
CI / test (pull_request) Successful in 23s
CI / docker (pull_request) Skipped

Label and checkmark stack in one grid cell (inline-grid, grid-area 1/1,
checkmark visibility-hidden until .ok), so the button width is static by
construction across the click. Replaces the min-width pin from fix attempt
1, which enlarged buttons by up to 0.64px (ceil of fractional width) and
leaked the pin after restore.

Applies to paste-view Copy/Link (paste.html + paste.js copyFeedback) and
the /new result-box copy button (new.js). Verified with CDP bounding-box
probes: Copy width/x identical before/during/after at 1400x900 and
375x812 (including the previously failing 52.36px mobile case), Link
button static, checkmark visible during feedback, no minWidth pin set.
This commit is contained in:
fen
2026-09-17 17:18:15 -05:00
parent 2a55f50d87
commit c32566979f
4 changed files with 15 additions and 17 deletions
+3 -9
View File
@@ -18,17 +18,11 @@ function toggleStats() {
}
function copyFeedback(btn) {
if (!btn) return;
if (!btn.dataset.label) btn.dataset.label = btn.textContent; // remember the original label (Copy/Link)
// #260: keep the button width static during the feedback so surrounding
// elements never jump. Pin the pre-swap width, release it on restore.
if (!btn.dataset.pinned) {
btn.style.minWidth = Math.ceil(btn.getBoundingClientRect().width) + 'px';
btn.dataset.pinned = '1';
}
// #260: the .swapbtn grid stacks label + checkmark in one cell, so the
// width is static by construction — feedback is a pure class toggle.
btn.classList.add('ok');
btn.textContent = '✓';
clearTimeout(btn._okh);
btn._okh = setTimeout(() => { btn.classList.remove('ok'); btn.textContent = btn.dataset.label; }, 2000);
btn._okh = setTimeout(() => btn.classList.remove('ok'), 2000);
}
function copyContent(btn) {
navigator.clipboard.writeText(document.getElementById('raw-content').value)