diff --git a/.changeset/status-bubble-over-titles.md b/.changeset/status-bubble-over-titles.md new file mode 100644 index 0000000..79ebe5c --- /dev/null +++ b/.changeset/status-bubble-over-titles.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Keep the chat status indicator bubble above sticky message titles. diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts index a9e08f2..5122423 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -265,7 +265,7 @@ export const chatStyles = css` .chat-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; } .chat { height: 100%; min-height: 0; overflow: auto; overflow-anchor: none; padding: 26px 16px 64px; box-sizing: border-box; } .scroll-marker { display: block; height: 0; overflow: hidden; pointer-events: none; } - .activity-dock { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; min-width: 0; box-sizing: border-box; border: 1px solid var(--pi-border); border-radius: 999px; background: var(--pi-bg-overlay); color: var(--pi-muted); padding: 8px 12px; font-size: 13px; pointer-events: none; box-shadow: 0 8px 28px var(--pi-shadow); backdrop-filter: blur(6px); } + .activity-dock { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; min-width: 0; box-sizing: border-box; border: 1px solid var(--pi-border); border-radius: 999px; background: var(--pi-bg-overlay); color: var(--pi-muted); padding: 8px 12px; font-size: 13px; pointer-events: none; box-shadow: 0 8px 28px var(--pi-shadow); backdrop-filter: blur(6px); } .activity-dock.active { border-color: var(--pi-success-border); color: var(--pi-success); background: var(--pi-success-bg-overlay); } .activity-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; }