From f07edadec7c7c93bc2177333ee6d56ca7030cd2b Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Tue, 25 Jun 2024 10:48:28 +0300
Subject: [PATCH] style: use Teleport for proper page hierarchy:

- Introduced the `attach` attribute to the `v-dialog` component for better dialog positioning.
- Created a new HTML element with the id `modals` to serve as the teleport target for dialogs.
- Updated Vuetify defaults to include the `attach` attribute, ensuring consistent dialog behavior across the application.
---
 packages/playground/index.html                            | 1 +
 packages/playground/src/components/TfOfflineNotifier.vue  | 2 +-
 packages/playground/src/components/app_info.vue           | 1 +
 .../src/components/contracts_list/contracts_table.vue     | 6 +++---
 .../playground/src/components/deployment_data_dialog.vue  | 2 +-
 packages/playground/src/components/deposit_dialog.vue     | 7 ++++++-
 .../playground/src/components/k8s_deployment_table.vue    | 2 +-
 packages/playground/src/components/logger.vue             | 2 +-
 .../src/components/manage_caprover_worker_dialog.vue      | 2 +-
 .../playground/src/components/manage_gateway_dialog.vue   | 5 +++--
 .../playground/src/components/manage_worker_dialog.vue    | 3 ++-
 packages/playground/src/components/node_details.vue       | 1 +
 .../playground/src/components/ssh_keys/SshDataDialog.vue  | 1 +
 .../playground/src/components/ssh_keys/SshFormDialog.vue  | 1 +
 .../playground/src/components/vm_deployment_table.vue     | 8 +++++++-
 packages/playground/src/components/withdraw_dialog.vue    | 1 +
 packages/playground/src/dashboard/components/add_ip.vue   | 4 ++--
 .../playground/src/dashboard/components/create_farm.vue   | 2 +-
 .../playground/src/dashboard/components/public_config.vue | 4 ++--
 .../src/dashboard/components/public_ips_table.vue         | 2 +-
 .../src/dashboard/components/reserve_action_btn.vue       | 2 +-
 .../playground/src/dashboard/components/set_extra_fee.vue | 2 +-
 .../playground/src/dashboard/components/user_farms.vue    | 2 +-
 packages/playground/src/dashboard/dao_view.vue            | 4 ++--
 packages/playground/src/dashboard/twin_view.vue           | 4 ++--
 packages/playground/src/plugins/vuetify.ts                | 1 +
 packages/playground/src/weblets/profile_manager.vue       | 3 ++-
 packages/playground/src/weblets/tf_contracts_list.vue     | 2 +-
 packages/playground/src/weblets/tf_deployment_list.vue    | 2 +-
 29 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/packages/playground/index.html b/packages/playground/index.html
index e07e59fd7e..72f6262517 100644
--- a/packages/playground/index.html
+++ b/packages/playground/index.html
@@ -46,6 +46,7 @@
       </div>
     </div>
     <div id="app"></div>
+    <div id="modals"></div>
     <script defer type="module" src="/src/main.ts"></script>
     <script src="/loader/loader.js"></script>
   </body>
diff --git a/packages/playground/src/components/TfOfflineNotifier.vue b/packages/playground/src/components/TfOfflineNotifier.vue
index 55bacdef9e..0eac11a857 100644
--- a/packages/playground/src/components/TfOfflineNotifier.vue
+++ b/packages/playground/src/components/TfOfflineNotifier.vue
@@ -1,5 +1,5 @@
 <template>
-  <VDialog scrollable persistent min-width="400px" max-width="700px" :model-value="offline || failed">
+  <VDialog scrollable persistent min-width="400px" max-width="700px" :model-value="offline || failed" attach="#modals">
     <VCard>
       <VCardTitle class="v-card-title font-weight-black text-center text-h5 bg-primary py-3" v-text="title" />
       <VCardText class="text-center">
diff --git a/packages/playground/src/components/app_info.vue b/packages/playground/src/components/app_info.vue
index 1c26110421..26e5d6730d 100644
--- a/packages/playground/src/components/app_info.vue
+++ b/packages/playground/src/components/app_info.vue
@@ -10,6 +10,7 @@
     @update:model-value="setOpenInfo($event)"
     :width="loading ? 'auto' : '60%'"
     scrollable
+    attach="#modals"
   >
     <v-card v-if="loading" class="d-flex justify-center align-center pa-10">
       <v-progress-circular indeterminate />
diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index 322f301645..5cd0726fd3 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -140,7 +140,7 @@
     </template>
   </weblet-layout>
 
-  <v-dialog width="800" v-model="contractStateDialog">
+  <v-dialog width="800" v-model="contractStateDialog" attach="#modals">
     <v-card>
       <v-toolbar color="primary" class="custom-toolbar">
         <p class="mb-5">Contract lock Details</p>
@@ -197,7 +197,7 @@
     </v-card>
   </v-dialog>
 
-  <v-dialog width="800" v-model="deletingDialog">
+  <v-dialog width="800" v-model="deletingDialog" attach="#modals">
     <v-card>
       <v-card-title class="bg-primary"> Delete the following contracts? </v-card-title>
       <v-alert class="ma-4" type="warning" variant="tonal"
@@ -219,7 +219,7 @@
     </v-card>
   </v-dialog>
 
-  <v-dialog width="800" v-model="unlockDialog">
+  <v-dialog width="800" v-model="unlockDialog" attach="#modals">
     <v-card>
       <v-card-title class="bg-primary">
         Unlock the following Contract<span v-if="selectedContracts.length > 1">s</span>
diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index a985911185..eb57f3f936 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row justify="center">
-    <v-dialog model-value @update:model-value="$emit('close')" scrollable>
+    <v-dialog model-value @update:model-value="$emit('close')" scrollable attach="#modals">
       <v-card>
         <v-card-title class="d-flex flex-column" v-if="!onlyJson">
           <div class="d-flex justify-center">
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index 652f2c29bb..f58d7c1df1 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -1,6 +1,11 @@
 <template>
   <v-container>
-    <v-dialog transition="dialog-bottom-transition" v-model="depositDialog" @update:model-value="closeDialog">
+    <v-dialog
+      transition="dialog-bottom-transition"
+      v-model="depositDialog"
+      @update:model-value="closeDialog"
+      attach="#modals"
+    >
       <v-card>
         <VCardTitle class="bg-primary">Deposit TFT</VCardTitle>
         <v-card-text>
diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 888d730108..87af2d9cea 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -17,7 +17,7 @@
         </template>
       </v-tooltip>
 
-      <v-dialog transition="dialog-bottom-transition" v-model="showDialog">
+      <v-dialog transition="dialog-bottom-transition" v-model="showDialog" attach="#modals">
         <v-card>
           <v-card-title style="color: #ffcc00; font-weight: bold">Failed Deployments</v-card-title>
           <v-divider color="#FFCC00" />
diff --git a/packages/playground/src/components/logger.vue b/packages/playground/src/components/logger.vue
index f6747baecc..fd697d46bd 100644
--- a/packages/playground/src/components/logger.vue
+++ b/packages/playground/src/components/logger.vue
@@ -76,7 +76,7 @@
     </v-expansion-panels>
   </VBottomNavigation>
 
-  <v-dialog max-width="400px" v-model="clearDialog">
+  <v-dialog max-width="400px" v-model="clearDialog" attach="#modals">
     <v-card>
       <VCardTitle v-text="'Clear Logs'" />
       <VCardText v-text="'This will delete all of your logs. Be careful this operation is irreversible!'" />
diff --git a/packages/playground/src/components/manage_caprover_worker_dialog.vue b/packages/playground/src/components/manage_caprover_worker_dialog.vue
index 3904d7faae..a2d868b311 100644
--- a/packages/playground/src/components/manage_caprover_worker_dialog.vue
+++ b/packages/playground/src/components/manage_caprover_worker_dialog.vue
@@ -41,7 +41,7 @@
     </template>
   </ManageWorkerDialog>
 
-  <v-dialog v-if="caproverData" v-model="deployedDialog" scrollable width="500px">
+  <v-dialog v-if="caproverData" v-model="deployedDialog" scrollable width="500px" attach="#modals">
     <v-card>
       <v-card-title> <strong>Add your worker</strong> </v-card-title>
 
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 7ba2149584..3b619ec022 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -5,6 +5,7 @@
       @update:model-value="$emit('close')"
       scrollable
       :persistent="deleting || layout?.status === 'deploy'"
+      attach="#modals"
     >
       <weblet-layout
         ref="layout"
@@ -40,7 +41,7 @@
           </template>
         </v-alert>
 
-        <v-dialog v-model="failedDomainDialog" max-width="400px" scrollable>
+        <v-dialog v-model="failedDomainDialog" max-width="400px" scrollable attach="#modals">
           <v-card>
             <v-card-title class="bg-warning">Failed Domains</v-card-title>
 
@@ -183,7 +184,7 @@
       </weblet-layout>
     </v-dialog>
 
-    <v-dialog v-model="requestDelete" max-width="600px">
+    <v-dialog v-model="requestDelete" max-width="600px" attach="#modals">
       <v-card>
         <v-card-title> Are you sure you want to delete the following gateways? </v-card-title>
         <v-card-text class="d-flex flex-wrap">
diff --git a/packages/playground/src/components/manage_worker_dialog.vue b/packages/playground/src/components/manage_worker_dialog.vue
index 9ac22b1128..05ed742dd2 100644
--- a/packages/playground/src/components/manage_worker_dialog.vue
+++ b/packages/playground/src/components/manage_worker_dialog.vue
@@ -4,6 +4,7 @@
     scrollable
     :persistent="layout?.status === 'deploy' || deleting"
     @update:model-value="$emit('close')"
+    attach="#modals"
   >
     <weblet-layout ref="layout" @back="$emit('back')">
       <template #title><slot name="title"></slot> </template>
@@ -47,7 +48,7 @@
     </weblet-layout>
   </v-dialog>
 
-  <v-dialog width="50%" v-model="deletingDialog">
+  <v-dialog width="50%" v-model="deletingDialog" attach="#modals">
     <v-card>
       <v-card-title class="text-h5"> Are you sure you want to delete the following workers? </v-card-title>
       <v-card-text>
diff --git a/packages/playground/src/components/node_details.vue b/packages/playground/src/components/node_details.vue
index fea79b3238..a3e6cb8c49 100644
--- a/packages/playground/src/components/node_details.vue
+++ b/packages/playground/src/components/node_details.vue
@@ -5,6 +5,7 @@
     @click:outside="() => $emit('close-dialog', false)"
     transition="dialog-bottom-transition"
     hide-overlay
+    attach="#modals"
   >
     <v-toolbar color="primary">
       <div class="d-flex justify-center">
diff --git a/packages/playground/src/components/ssh_keys/SshDataDialog.vue b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
index d2eb747e29..7c30593034 100644
--- a/packages/playground/src/components/ssh_keys/SshDataDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
@@ -4,6 +4,7 @@
     @keydown.esc="() => $emit('close')"
     v-model="$props.open"
     max-width="800"
+    attach="#modals"
   >
     <template v-slot:default>
       <v-card>
diff --git a/packages/playground/src/components/ssh_keys/SshFormDialog.vue b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
index 1eddfb967e..89d3b66c0d 100644
--- a/packages/playground/src/components/ssh_keys/SshFormDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
@@ -4,6 +4,7 @@
     @keydown.esc="() => $emit('close')"
     v-model="$props.open"
     max-width="800"
+    attach="#modals"
   >
     <template v-slot:default>
       <v-form v-model="isValidForm">
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index eaa5b2f4a8..4c45a478b0 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -20,7 +20,13 @@
         </template>
       </v-tooltip>
 
-      <v-dialog transition="dialog-bottom-transition" v-model="showDialog" max-width="500px" scrollable>
+      <v-dialog
+        transition="dialog-bottom-transition"
+        v-model="showDialog"
+        max-width="500px"
+        scrollable
+        attach="#modals"
+      >
         <v-card>
           <v-card-title style="font-weight: bold">Failed Deployments</v-card-title>
           <v-divider color="#FFCC00" />
diff --git a/packages/playground/src/components/withdraw_dialog.vue b/packages/playground/src/components/withdraw_dialog.vue
index a8f3cc527f..318810263e 100644
--- a/packages/playground/src/components/withdraw_dialog.vue
+++ b/packages/playground/src/components/withdraw_dialog.vue
@@ -5,6 +5,7 @@
       max-width="50%"
       v-model="withdrawDialog"
       @update:model-value="closeDialog"
+      attach="#modals"
     >
       <v-card>
         <v-card-title class="bg-primary"> Withdraw TFT </v-card-title>
diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
index 011fff3692..f93809e328 100644
--- a/packages/playground/src/dashboard/components/add_ip.vue
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -4,7 +4,7 @@
   >
   <v-container>
     <v-container v-if="showDialogue">
-      <v-dialog v-model="showDialogue" max-width="600">
+      <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary">Add Public IP to Farm</v-card-title>
           <v-card-text>
@@ -74,7 +74,7 @@
             </form-validator>
             <v-divider />
           </v-card-text>
-          <v-dialog v-model="showIPs" max-width="500">
+          <v-dialog v-model="showIPs" max-width="500" attach="#modals">
             <v-card>
               <v-card-title class="text-h5">IPs range</v-card-title>
               <v-card-text v-for="(IP, i) in IPs" :key="IP">{{ i + 1 }}- {{ IP }}</v-card-text>
diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
index 6daf7094b9..8408706c8e 100644
--- a/packages/playground/src/dashboard/components/create_farm.vue
+++ b/packages/playground/src/dashboard/components/create_farm.vue
@@ -15,7 +15,7 @@
     </v-row>
 
     <v-container v-if="showDialogue">
-      <v-dialog v-model="showDialogue" max-width="600">
+      <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary"> Create Farm </v-card-title>
           <v-card-text>
diff --git a/packages/playground/src/dashboard/components/public_config.vue b/packages/playground/src/dashboard/components/public_config.vue
index 4ca397ce14..f8e349f02d 100644
--- a/packages/playground/src/dashboard/components/public_config.vue
+++ b/packages/playground/src/dashboard/components/public_config.vue
@@ -16,7 +16,7 @@
     </v-tooltip>
 
     <template v-if="showDialogue">
-      <v-dialog v-model="showDialogue" max-width="600" @click:outside="reset">
+      <v-dialog v-model="showDialogue" max-width="600" @click:outside="reset" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary">
             Add a public config to your node with ID: {{ $props.nodeId }}
@@ -138,7 +138,7 @@
 
     <!-- Remove Config Dialog -->
     <template v-if="showClearDialogue">
-      <v-dialog v-model="showClearDialogue" width="650">
+      <v-dialog v-model="showClearDialogue" width="650" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary"> Remove Public Config </v-card-title>
           <v-card-text>Are you sure you want to remove this node's public config? </v-card-text>
diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 0ab6441c83..7e1e22c895 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -33,7 +33,7 @@
         </div>
       </template>
     </ListTable>
-    <v-dialog v-model="showDialogue" max-width="600">
+    <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
       <v-card>
         <v-card-title class="text-subtitle-1">
           <strong>Delete the following IPs?</strong>
diff --git a/packages/playground/src/dashboard/components/reserve_action_btn.vue b/packages/playground/src/dashboard/components/reserve_action_btn.vue
index 5f91ecb662..da1a15ab44 100644
--- a/packages/playground/src/dashboard/components/reserve_action_btn.vue
+++ b/packages/playground/src/dashboard/components/reserve_action_btn.vue
@@ -1,6 +1,6 @@
 <template>
   <container>
-    <v-dialog v-model="openUnreserveDialog" max-width="600" class="custom-dialog">
+    <v-dialog v-model="openUnreserveDialog" max-width="600" class="custom-dialog" attach="#modals">
       <v-card>
         <v-card-title class="pt-4">
           <span style="display: flex; align-items: center">
diff --git a/packages/playground/src/dashboard/components/set_extra_fee.vue b/packages/playground/src/dashboard/components/set_extra_fee.vue
index 992c16fa4e..3e02b135bd 100644
--- a/packages/playground/src/dashboard/components/set_extra_fee.vue
+++ b/packages/playground/src/dashboard/components/set_extra_fee.vue
@@ -16,7 +16,7 @@
     </v-tooltip>
 
     <span v-if="showDialogue">
-      <v-dialog v-model="showDialogue" max-width="600">
+      <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary"> Set Additional Fees </v-card-title>
           <v-card-text>
diff --git a/packages/playground/src/dashboard/components/user_farms.vue b/packages/playground/src/dashboard/components/user_farms.vue
index 8fca6b6bf5..869596c2ed 100644
--- a/packages/playground/src/dashboard/components/user_farms.vue
+++ b/packages/playground/src/dashboard/components/user_farms.vue
@@ -86,7 +86,7 @@
         </tr>
 
         <v-container v-if="showDialogue">
-          <v-dialog v-model="showDialogue" max-width="600">
+          <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
             <v-card>
               <v-toolbar color="primary" dark>
                 <v-toolbar-title class="custom-toolbar_title mb-6"> Add/Edit Stellar V2 Address </v-toolbar-title>
diff --git a/packages/playground/src/dashboard/dao_view.vue b/packages/playground/src/dashboard/dao_view.vue
index 34fba3dd47..707c28826b 100644
--- a/packages/playground/src/dashboard/dao_view.vue
+++ b/packages/playground/src/dashboard/dao_view.vue
@@ -209,7 +209,7 @@
           </v-card>
         </v-window-item>
       </v-window>
-      <v-dialog v-model="openVDialog" max-width="600" scrollable>
+      <v-dialog v-model="openVDialog" max-width="600" scrollable attach="#modals">
         <v-card>
           <v-card-title>Cast Vote</v-card-title>
           <v-card-text>
@@ -235,7 +235,7 @@
           </v-card-actions>
         </v-card>
       </v-dialog>
-      <v-dialog v-model="openInfoModal" width="50vw">
+      <v-dialog v-model="openInfoModal" width="50vw" attach="#modals">
         <v-card>
           <v-card-title class="text-h5 my-2"> Proposals Information </v-card-title>
           <v-divider></v-divider>
diff --git a/packages/playground/src/dashboard/twin_view.vue b/packages/playground/src/dashboard/twin_view.vue
index 8f7337e51e..117b2379fe 100644
--- a/packages/playground/src/dashboard/twin_view.vue
+++ b/packages/playground/src/dashboard/twin_view.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-container v-if="editingTwin">
-      <v-dialog v-model="editingTwin" max-width="600">
+      <v-dialog v-model="editingTwin" max-width="600" attach="#modals">
         <v-card>
           <v-toolbar color="primary" dark class="custom-toolbar">Edit Twin</v-toolbar>
           <div class="text-h2 pa-10">
@@ -15,7 +15,7 @@
       </v-dialog>
     </v-container>
 
-    <v-dialog v-model="openVotePopup" max-width="600">
+    <v-dialog v-model="openVotePopup" max-width="600" attach="#modals">
       <v-card>
         <v-toolbar color="primary" dark class="custom-toolbar bold-text">Vote Reminder</v-toolbar>
         <v-card-text>There are {{ numberOfProposalsToVoteOn }} active proposals you can vote on now</v-card-text>
diff --git a/packages/playground/src/plugins/vuetify.ts b/packages/playground/src/plugins/vuetify.ts
index 6d5fb29833..1853d91b29 100644
--- a/packages/playground/src/plugins/vuetify.ts
+++ b/packages/playground/src/plugins/vuetify.ts
@@ -39,6 +39,7 @@ const defaults = {
   },
   VDialog: {
     width: "70%",
+    attach: "#modals",
   },
 };
 
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 2c36454672..4eada15053 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -4,6 +4,7 @@
     class="mx-auto"
     :model-value="$props.modelValue"
     @update:model-value="handleProfileDialog($event)"
+    attach="#modals"
   >
     <template #activator="{ props }">
       <VCard v-bind="props" class="pa-3 d-inline-flex align-center">
@@ -201,7 +202,7 @@
                 </template>
               </VTooltip>
 
-              <v-dialog v-model="openAcceptTerms" fullscreen width="100%">
+              <v-dialog v-model="openAcceptTerms" fullscreen width="100%" attach="#modals">
                 <v-card v-if="!termsLoading">
                   <v-card-text class="pa-15" v-html="acceptTermsContent"></v-card-text>
                   <div class="terms-footer">
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 71755c58b5..c80eeb26d0 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -62,7 +62,7 @@
     </template>
   </v-card>
   <!-- locked amount Dialog -->
-  <v-dialog width="500" v-model="unlockDialog" v-if="lockedContracts?.totalAmountLocked">
+  <v-dialog width="500" v-model="unlockDialog" v-if="lockedContracts?.totalAmountLocked" attach="#modals">
     <v-card>
       <v-card-title class="bg-primary">
         Unlock All Contracts
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 8b98883e0d..d658f60978 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -351,7 +351,7 @@
     </template>
   </weblet-layout>
 
-  <v-dialog v-model="deletingDialog" scrollable width="600">
+  <v-dialog v-model="deletingDialog" scrollable width="600" attach="#modals">
     <v-card>
       <v-card-title>
         <strong>Delete the following deployments?</strong>