diff --git a/apps/web/src/components/SmsHeaderWallet.vue b/apps/web/src/components/SmsHeaderWallet.vue
index 4cd04b3..6d6a0b4 100644
--- a/apps/web/src/components/SmsHeaderWallet.vue
+++ b/apps/web/src/components/SmsHeaderWallet.vue
@@ -126,6 +126,7 @@ defineExpose({ refresh: load });
       <button type="button" class="charge" @click="chargeOpen = true">شارژ</button>
     </div>
 
+    <Teleport to="body">
     <div v-if="chargeOpen" class="layer">
       <div class="backdrop" @click="closeCharge" />
       <div class="modal charge-modal" role="dialog" aria-label="شارژ پیامک">
@@ -170,7 +171,9 @@ defineExpose({ refresh: load });
         <p v-else class="muted">اطلاعات واریز در دسترس نیست.</p>
       </div>
     </div>
+    </Teleport>
 
+    <Teleport to="body">
     <div v-if="warnOpen" class="layer">
       <div class="backdrop" @click="warnOpen = false" />
       <div class="modal warn" role="dialog" aria-label="هشدار موجودی منفی">
@@ -186,6 +189,7 @@ defineExpose({ refresh: load });
         <button type="button" class="ok" @click="warnOpen = false">متوجه شدم</button>
       </div>
     </div>
+    </Teleport>
   </div>
 </template>
 
@@ -275,9 +279,12 @@ defineExpose({ refresh: load });
 .layer {
   position: fixed;
   inset: 0;
-  z-index: 80;
-  display: grid;
-  place-items: center;
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  overflow: auto;
 }
 
 .backdrop {
@@ -289,7 +296,8 @@ defineExpose({ refresh: load });
 .modal {
   position: relative;
   width: min(420px, calc(100vw - 2rem));
-  max-height: min(90vh, 640px);
+  max-height: calc(100vh - 2rem);
+  margin: auto;
   overflow: auto;
   background: #fff;
   border-radius: 16px;