Fix: Use Teleport for Updates modal to escape footer constraints

src/components/FooterOpen.vue

@@ -25,7 +25,10 @@
       <span class="updates-link" @click="showUpdates = true">Updates</span>
     </div>
 
-    <!-- Updates Modal -->
+  </footer>
+
+  <!-- Updates Modal - Teleport to body so it's not constrained by footer -->
+  <Teleport to="body">
     <div v-if="showUpdates" class="modal-overlay" @click.self="showUpdates = false">
       <div class="modal-content">
         <div class="modal-header">
@@ -42,7 +45,7 @@
         </div>
       </div>
     </div>
-  </footer>
+  </Teleport>
 </template>
 
 <script>
@@ -175,7 +178,47 @@ export default {
   text-decoration: underline;
 }
 
-/* Modal styles */
+/* Responsive */
+@media (max-width: 768px) {
+  .page-footer {
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+  }
+
+  .logo-item {
+    width: 60px;
+    height: 20px;
+  }
+
+  .footer-bottom-right {
+    position: static;
+    margin-top: 0.5rem;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .footer-label {
+    font-size: 0.8rem;
+  }
+
+  .logos-row {
+    gap: 0.75rem;
+  }
+
+  .logo-item {
+    width: 52px;
+    height: 18px;
+  }
+
+  .footer-bottom-right {
+    font-size: 0.7rem;
+  }
+}
+</style>
+
+<!-- Global styles for Teleported modal -->
+<style>
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -186,7 +229,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: 9999;
 }
 
 .modal-content {
@@ -262,42 +305,4 @@ export default {
 .update-list li:last-child {
   margin-bottom: 0;
 }
-
-/* Responsive */
-@media (max-width: 768px) {
-  .page-footer {
-    padding: 0.75rem 1rem;
-    gap: 0.5rem;
-  }
-
-  .logo-item {
-    width: 60px;
-    height: 20px;
-  }
-
-  .footer-bottom-right {
-    position: static;
-    margin-top: 0.5rem;
-    justify-content: center;
-  }
-}
-
-@media (max-width: 480px) {
-  .footer-label {
-    font-size: 0.8rem;
-  }
-
-  .logos-row {
-    gap: 0.75rem;
-  }
-
-  .logo-item {
-    width: 52px;
-    height: 18px;
-  }
-
-  .footer-bottom-right {
-    font-size: 0.7rem;
-  }
-}
 </style>