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

@@ -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: 
+    const result:
-    { 
+    {
-        eightyIsShown: boolean, 
+        eightyIsShown: boolean,
-        hundredIsShown: boolean, 
+        hundredIsShown: boolean,
-        eightyLabel?: string, 
+        eightyLabel?: string,
-        eightyModalTitle?: string, 
+        eightyModalTitle?: string,
-        eightyModalLimitType?: string, 
+        eightyModalLimitType?: string,
-        hundredLabel?: string, 
+        hundredLabel?: string,
-        hundredModalTitle?: string, 
+        hundredModalTitle?: string,
-        hundredModalLimitType?: 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) {