Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(hibp): put the progress pill in the toast stack, bottom right

Browse Source 
Free-floating it either covered the cards or the sidebar navigation. Inside .toast-container it shares the corner with the toasts, and column-reverse keeps it above them.
This commit is contained in:
r-zakarya
2026-08-01 22:41:34 +01:00
parent 961d77534f
commit fb65f4b7d6
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+5 -8
View File
@@ -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,
js/app.js
+4 -1
View File
@@ -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;