From 17ec326fd42c86b2e3e58974c484fa4f1c44c537 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Fri, 24 Feb 2023 16:39:58 +0200
Subject: [PATCH] web/satellite: make inactivity modal appear on top of other
 modals

This change makes sure that inactivity modal appears on top of everything else including other modals.
If it is the last element of main dashboard wrapper then it will be the last element in DOM tree which makes it appear on top of everything.

Issue:
https://github.com/storj/storj/issues/5549

Change-Id: Ibb0c6e2036c0be09aae17118f672dbed4ffc5b62
---
 web/satellite/src/views/DashboardArea.vue | 41 ++++++++++++-----------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/web/satellite/src/views/DashboardArea.vue b/web/satellite/src/views/DashboardArea.vue
index 522bf6566..e1f1c2bd9 100644
--- a/web/satellite/src/views/DashboardArea.vue
+++ b/web/satellite/src/views/DashboardArea.vue
@@ -69,13 +69,6 @@
         <div v-if="debugTimerShown && !isLoading" class="dashboard__debug-timer">
             <p>Remaining session time: <b class="dashboard__debug-timer__bold">{{ debugTimerText }}</b></p>
         </div>
-        <InactivityModal
-            v-if="inactivityModalShown"
-            :on-continue="refreshSession"
-            :on-logout="handleInactive"
-            :on-close="closeInactivityModal"
-            :initial-seconds="inactivityModalTime / 1000"
-        />
         <limit-warning-modal
             v-if="isHundredLimitModalShown && !isLoading"
             severity="critical"
@@ -93,6 +86,14 @@
             :on-upgrade="togglePMModal"
         />
         <AllModals />
+        <!-- IMPORTANT! Make sure this modal is positioned as the last element here so that it is shown on top of everything else -->
+        <InactivityModal
+            v-if="inactivityModalShown"
+            :on-continue="refreshSession"
+            :on-logout="handleInactive"
+            :on-close="closeInactivityModal"
+            :initial-seconds="inactivityModalTime / 1000"
+        />
     </div>
 </template>
 
@@ -186,21 +187,21 @@ const isAccountFrozen = computed((): boolean => {
 const limitState = computed((): { eightyIsShown: boolean, hundredIsShown: boolean, eightyLabel?: string, eightyModalTitle?: string, eightyModalLimitType?: string, hundredLabel?: string, hundredModalTitle?: string, hundredModalLimitType?: string  } => {
     if (store.state.usersModule.user.paidTier || isAccountFrozen.value) return { eightyIsShown: false, hundredIsShown: false };
 
-    const result: 
-    { 
-        eightyIsShown: boolean, 
-        hundredIsShown: boolean, 
-        eightyLabel?: string, 
-        eightyModalTitle?: string, 
-        eightyModalLimitType?: string, 
-        hundredLabel?: string, 
-        hundredModalTitle?: string, 
-        hundredModalLimitType?: string  
-    
+    const result:
+    {
+        eightyIsShown: boolean,
+        hundredIsShown: boolean,
+        eightyLabel?: string,
+        eightyModalTitle?: string,
+        eightyModalLimitType?: string,
+        hundredLabel?: string,
+        hundredModalTitle?: string,
+        hundredModalLimitType?: string
+
     } = { eightyIsShown: false, hundredIsShown: false, eightyLabel: '', hundredLabel: '' };
 
     const { currentLimits } = store.state.projectsModule;
-    
+
     const limitTypeArr = [
         { name: 'bandwidth', usedPercent: Math.round(currentLimits.bandwidthUsed * 100 / currentLimits.bandwidthLimit) },
         { name: 'storage', usedPercent: Math.round(currentLimits.storageUsed * 100 / currentLimits.storageLimit) },
@@ -217,7 +218,7 @@ const limitState = computed((): { eightyIsShown: boolean, hundredIsShown: boolea
             } else {
                 eightyPercent.push(limitType.name);
             }
-        } 
+        }
     });
 
     if (eightyPercent.length !== 0) {