#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
+2 -6
View File
@@ -192,18 +192,14 @@ async function create() {
// button, password auto-unlock, then redirect to the paste.
function finishCreate(data) {
const url = location.origin + '/' + (data.custom_slug || data.id);
showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button"></button>', 'ok');
showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon swapbtn" id="result-copy" title="Copy URL" type="button"><span class="btn-label">⧉</span><span class="btn-check">✓</span></button>', 'ok');
$('result').dataset.token = data.deletion_token || '';
const copyBtn = document.getElementById('result-copy');
copyBtn.addEventListener('click', () => {
try {
navigator.clipboard.writeText(url);
copyBtn.classList.add('ok'); // in-place success feedback (#53)
// #260: pin the pre-swap width so the wider/narrower glyph never
// shifts neighbouring elements; release it when the label restores.
copyBtn.style.minWidth = Math.ceil(copyBtn.getBoundingClientRect().width) + 'px';
copyBtn.textContent = '✓';
setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; copyBtn.style.minWidth = ''; }, 2000);
setTimeout(() => copyBtn.classList.remove('ok'), 2000);
} catch(e) { toast('Copy failed', 'error'); }
});
// token carried via sessionStorage, never in the URL (#143)