From 6c094af917176cd2b11a517379c06ef5e47c12d3 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Mon, 1 Jun 2026 18:09:49 +0200 Subject: [PATCH] fix: contain chat overlay stacking --- .changeset/contain-chat-overlay-z-index.md | 5 +++++ src/client/src/components/shared.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/contain-chat-overlay-z-index.md diff --git a/.changeset/contain-chat-overlay-z-index.md b/.changeset/contain-chat-overlay-z-index.md new file mode 100644 index 0000000..bc2d34b --- /dev/null +++ b/.changeset/contain-chat-overlay-z-index.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Keep slash command autocomplete visible above the chat status indicator. diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts index 077dfb9..462c469 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -270,7 +270,7 @@ export const listStyles = css` `; export const chatStyles = css` - :host { display: flex; flex-direction: column; min-height: 0; overflow: hidden; color: var(--pi-text); font: 14px system-ui, sans-serif; } + :host { position: relative; z-index: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; color: var(--pi-text); font: 14px system-ui, sans-serif; } .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; } @@ -447,7 +447,7 @@ export const actionPaletteStyles = css` `; export const promptEditorStyles = css` - :host { position: relative; z-index: 30; display: block; color: var(--pi-text); font: 14px system-ui, sans-serif; } + :host { position: relative; z-index: 5; display: block; color: var(--pi-text); font: 14px system-ui, sans-serif; } footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border-top: 1px solid var(--pi-border); } footer.shell-mode { border-top-color: var(--pi-success); background: var(--pi-success-bg); } .editor-wrap { position: relative; min-width: 0; }