diff --git a/css/style.css b/css/style.css index 93a8e22..b8aa842 100644 --- a/css/style.css +++ b/css/style.css @@ -2343,14 +2343,12 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before { animation: busy-spin 0.7s linear infinite; } @keyframes busy-spin { to { transform: rotate(360deg); } } -/* Breach-scan progress. Bottom-left so it never sits under the toasts, which - stack bottom-right. Non-blocking: no backdrop, no pointer capture. */ +/* Breach-scan progress. Non-blocking: no backdrop, no pointer capture. + Lives INSIDE .toast-container, so it stacks with the toasts in the same + corner instead of floating over the cards (pinned to the left edge it also + covered the sidebar navigation). column-reverse puts it above them. */ .hibp-progress { - position: fixed; - /* Clear of the 240px sidebar — pinned to the left edge it sat on top of the - navigation and hid Trash. Left of the toasts, which stack bottom-right. */ - left: 256px; bottom: 16px; - z-index: 150; + align-self: flex-end; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; @@ -2668,7 +2666,6 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before { @media (max-width: 900px) { .app-shell { grid-template-columns: 60px 1fr; } - .hibp-progress { left: 76px; } /* the sidebar collapses to 60px here */ .sidebar { padding: 12px 6px; } .sidebar-brand span, .nav-item > span:first-of-type, diff --git a/js/app.js b/js/app.js index 6781ff4..8cf3080 100644 --- a/js/app.js +++ b/js/app.js @@ -969,7 +969,10 @@ function hibpProgress(done, total) { pill = el('div', { class: 'hibp-progress', id: 'hibpProgress' }); pill.appendChild(el('div', { class: 'hibp-progress-spinner' })); pill.appendChild(el('span', { class: 'hibp-progress-text' })); - document.body.appendChild(pill); + // Inside the toast stack rather than free-floating: it then sits in the + // same corner as the toasts and can never overlap them or the cards. + const host = document.querySelector('.toast-container'); + (host || document.body).appendChild(pill); } const t = pill.querySelector('.hibp-progress-text'); if (t) t.textContent = 'Checking breaches… ' + done + '/' + total;