diff --git a/zddc/internal/handler/tables.html b/zddc/internal/handler/tables.html index fdc6068..0f8e619 100644 --- a/zddc/internal/handler/tables.html +++ b/zddc/internal/handler/tables.html @@ -814,23 +814,75 @@ body.help-open .app-header { with tool-local .toast classes; the old classifier rules can stay alongside until this file is concatenated above them in the build. */ -.zddc-toast { +/* Toast STACK — bottom-right, newest at the bottom. The container is + click-through (pointer-events:none) so the gaps don't block the page; each + toast + button re-enables pointer events. */ +.zddc-toasts { position: fixed; - bottom: 2rem; - right: 2rem; + bottom: 1.5rem; + right: 1.5rem; + z-index: 9000; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 0.5rem; + max-height: calc(100vh - 3rem); + overflow-y: auto; + pointer-events: none; +} + +/* "Clear all" — shown above the stack when 2+ toasts are present. */ +.zddc-toasts__clear { + pointer-events: auto; + align-self: flex-end; background: var(--bg); color: var(--text); - padding: 0.875rem 1.25rem; + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 0.2rem 0.6rem; + font-size: 0.78rem; + cursor: pointer; +} +.zddc-toasts__clear:hover { background: var(--bg-secondary, rgba(0, 0, 0, 0.05)); } + +.zddc-toast { + position: relative; + pointer-events: auto; + background: var(--bg); + color: var(--text); + padding: 0.7rem 1.7rem 0.7rem 1rem; /* room for the × at top-right */ border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - z-index: 9000; - max-width: 400px; + max-width: 420px; font-size: 0.875rem; - cursor: pointer; animation: zddc-toast-in 0.3s ease-out; } +/* Message text — selectable + copyable; long/multi-line errors wrap. */ +.zddc-toast__msg { + user-select: text; + -webkit-user-select: text; + cursor: text; + white-space: pre-wrap; + word-break: break-word; +} + +/* Per-toast dismiss. */ +.zddc-toast__close { + position: absolute; + top: 0.2rem; + right: 0.35rem; + border: none; + background: transparent; + color: var(--text-muted, #888); + font-size: 1.15rem; + line-height: 1; + cursor: pointer; + padding: 0 0.15rem; +} +.zddc-toast__close:hover { color: var(--text); } + .zddc-toast--success { border-left: 4px solid var(--success); } .zddc-toast--error { border-left: 4px solid var(--danger); } .zddc-toast--info { border-left: 4px solid var(--info); } @@ -1670,7 +1722,7 @@ body.is-elevated::after {