diff --git a/.changeset/pwa-refresh-menu.md b/.changeset/pwa-refresh-menu.md index 8308575..0b55583 100644 --- a/.changeset/pwa-refresh-menu.md +++ b/.changeset/pwa-refresh-menu.md @@ -2,4 +2,4 @@ "@jmfederico/pi-web": patch --- -Fix the PWA refresh control menu so its reload options are visible when opened from the compact header button. +Keep the PWA refresh control menu visible above the mobile tab navigation. diff --git a/src/client/src/components/appShell/AppContextBar.ts b/src/client/src/components/appShell/AppContextBar.ts index 45ce6ad..f7c87b4 100644 --- a/src/client/src/components/appShell/AppContextBar.ts +++ b/src/client/src/components/appShell/AppContextBar.ts @@ -105,7 +105,8 @@ export class AppContextBar extends LitElement { }; static override styles = css` - :host { flex: 0 0 auto; min-width: 0; } + /* Keep the refresh menu in this shadow tree above the following mobile tab strip. */ + :host { position: relative; z-index: 20; flex: 0 0 auto; min-width: 0; } .context-bar { position: relative; flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: 0; padding: 6px 0; border-bottom: 1px solid var(--pi-border-muted); background: var(--pi-bg); } .context-bar::before, .context-bar::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 20px; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .context-bar::before { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--pi-shadow-strong) 55%, transparent) 0%, transparent 100%); }