fix: keep PWA refresh menu above mobile tabs

This commit is contained in:
Federico Jaramillo Martinez
2026-06-02 17:51:35 +02:00
parent 8cd2bbaf1d
commit e0ae5ef9b2
2 changed files with 3 additions and 2 deletions
+1 -1
View File
@@ -2,4 +2,4 @@
"@jmfederico/pi-web": patch "@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.
@@ -105,7 +105,8 @@ export class AppContextBar extends LitElement {
}; };
static override styles = css` 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 { 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, .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%); } .context-bar::before { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--pi-shadow-strong) 55%, transparent) 0%, transparent 100%); }