From dcb875ea8c0b6595873ef225c098ce7de93742cb Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Sun, 18 Jan 2026 11:10:29 -0600
Subject: [PATCH] fix(ui): fix API token success modal z-index issue

The token success modal was missing z-index classes that caused the modal
content to appear behind the grey backdrop. Users could only see the
checkmark icon and couldn't interact with the modal properly.

Changes:
- Added z-0 class to backdrop div
- Added relative z-10 classes to span and modal content div
- Added unique ID to modal (token-success-modal)
- Added unique ID to modal title (token-success-modal-title)

This matches the z-index structure used in the "add token" modal.
---
 lib/towerops_web/live/user_settings_live.ex | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/lib/towerops_web/live/user_settings_live.ex b/lib/towerops_web/live/user_settings_live.ex
index 2185f27d..34a4bbe0 100644
--- a/lib/towerops_web/live/user_settings_live.ex
+++ b/lib/towerops_web/live/user_settings_live.ex
@@ -1003,29 +1003,36 @@ defmodule ToweropsWeb.UserSettingsLive do
     <!-- Token Created Success Modal -->
       <%= if @show_token_modal && @created_token do %>
         <div
+          id="token-success-modal"
           class="fixed inset-0 z-50 overflow-y-auto"
-          aria-labelledby="modal-title"
+          aria-labelledby="token-success-modal-title"
           role="dialog"
           aria-modal="true"
         >
           <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
             <div
               phx-click="close_token_modal"
-              class="fixed inset-0 bg-zinc-500 bg-opacity-75 transition-opacity dark:bg-zinc-950 dark:bg-opacity-75"
+              class="fixed inset-0 z-0 bg-zinc-500 bg-opacity-75 transition-opacity dark:bg-zinc-950 dark:bg-opacity-75"
               aria-hidden="true"
             >
             </div>
-            <span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
+            <span
+              class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
+              aria-hidden="true"
+            >
               &#8203;
             </span>
 
-            <div class="inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-zinc-900 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+            <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-zinc-900 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
               <div>
                 <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
                   <.icon name="hero-check" class="h-6 w-6 text-green-600 dark:text-green-400" />
                 </div>
                 <div class="mt-3 text-center sm:mt-5">
-                  <h3 class="text-lg font-semibold leading-6 text-zinc-900 dark:text-zinc-100">
+                  <h3
+                    id="token-success-modal-title"
+                    class="text-lg font-semibold leading-6 text-zinc-900 dark:text-zinc-100"
+                  >
                     API Token Created
                   </h3>
                   <div class="mt-2">