From b2feccdb90ea59c4cba0b897214c6558a27d8186 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Wed, 14 Jan 2026 15:53:23 +0000
Subject: [PATCH] Improve TSCM modal close button visibility

- Add circular background to close button
- Use visible border and solid background color
- Increase z-index to ensure it's above content
- Add hover effect with red background
- Better positioning and sizing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 templates/index.html | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index f6d4db0..1272429 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2273,16 +2273,27 @@
                     }
                     .tscm-modal-close {
                         position: absolute;
-                        top: 10px;
-                        right: 10px;
-                        background: none;
-                        border: none;
-                        color: var(--text-muted);
-                        font-size: 24px;
+                        top: 12px;
+                        right: 12px;
+                        background: var(--bg-tertiary);
+                        border: 1px solid var(--border-light);
+                        border-radius: 50%;
+                        width: 32px;
+                        height: 32px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: var(--text-secondary);
+                        font-size: 20px;
                         cursor: pointer;
-                        z-index: 1;
+                        z-index: 10;
+                        transition: all 0.2s;
+                    }
+                    .tscm-modal-close:hover {
+                        background: var(--accent-red);
+                        border-color: var(--accent-red);
+                        color: #fff;
                     }
-                    .tscm-modal-close:hover { color: #fff; }
                     .device-detail-header {
                         padding: 16px;
                         border-bottom: 1px solid var(--border-color);