From 96f2a8f8fcc319b1aec9057857031092686841a6 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 3 Nov 2023 21:48:17 +0100
Subject: [PATCH] [UI] Set a base `z-index` for the root content canvas.

This allows loading spinners, modals and other components with a real
fullscreen background to stretch over the required space, without being
covered by the navigator or other sibling components.

This also requires the collapsed navigator to have a 1px margin-right,
or its separation border won't be visible.
---
 platypush/backend/http/webapp/src/components/Nav.vue | 1 +
 platypush/backend/http/webapp/src/views/Panel.vue    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/platypush/backend/http/webapp/src/components/Nav.vue b/platypush/backend/http/webapp/src/components/Nav.vue
index 10c97760..da7cd133 100644
--- a/platypush/backend/http/webapp/src/components/Nav.vue
+++ b/platypush/backend/http/webapp/src/components/Nav.vue
@@ -331,6 +331,7 @@ nav {
   &.collapsed {
     display: flex;
     flex-direction: column;
+    margin-right: 1px;
 
     @media screen and (min-width: $tablet) {
       width: 2.5em;
diff --git a/platypush/backend/http/webapp/src/views/Panel.vue b/platypush/backend/http/webapp/src/views/Panel.vue
index acdffb53..c8497ef2 100644
--- a/platypush/backend/http/webapp/src/views/Panel.vue
+++ b/platypush/backend/http/webapp/src/views/Panel.vue
@@ -134,6 +134,7 @@ main {
     flex-grow: 100;
     background: $menu-panel-bg;
     overflow: auto;
+    z-index: 1;
 
     .panel {
       width: 100%;