fix: disconnect indicator zindex, close #202

nuxt · Apr 29, 2023 · e9ab49f · e9ab49f
1 parent 95353b6
commit e9ab49f
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/packages/devtools/client/components/DisconnectIndicator.vue b/packages/devtools/client/components/DisconnectIndicator.vue
@@ -2,18 +2,20 @@
 </script>
 
 <template>
-  <div
-    v-if="wsError || wsConnecting"
-    border="t base"
-    fixed bottom-0 left-0 right-0 z-200 p5 glass-effect
-  >
-    <div v-if="wsError" flex="~ gap-2" items-center text-rose>
-      <NIcon icon="i-carbon-wifi-off" />
-      WebSocket disconnected
+  <Teleport to="body">
+    <div
+      v-if="wsError || wsConnecting"
+      border="t base"
+      fixed bottom-0 left-0 right-0 z-2147483646 p5 glass-effect
+    >
+      <div v-if="wsError" flex="~ gap-2" items-center text-rose>
+        <NIcon icon="i-carbon-wifi-off" />
+        WebSocket disconnected
+      </div>
+      <div v-else-if="wsConnecting" flex="~ gap-2" animate-pulse items-center text-yellow>
+        <NIcon icon="i-carbon-circle-dash" animate-spin />
+        Connecting to the server...
+      </div>
     </div>
-    <div v-else-if="wsConnecting" flex="~ gap-2" animate-pulse items-center text-yellow>
-      <NIcon icon="i-carbon-circle-dash" animate-spin />
-      Connecting to the server...
-    </div>
-  </div>
+  </Teleport>
 </template>