fix secrets tab functionalitty

web/admin/admin.php

@@ -202,7 +202,9 @@ if ($authenticated && isset($_GET['host'])) {
                                                     > <?php echo htmlspecialchars(str_replace('_', ' ', $type)); ?>
                                                 </div>
                                                 <div class="command">
-                                                    <?php echo htmlspecialchars($value); ?>
+                                                    <div class="secret-content">
+                                                        <?php echo htmlspecialchars($value); ?>
+                                                    </div>
                                                     <button class="copy-btn" data-clipboard="<?php echo htmlspecialchars($value); ?>">
                                                         copy
                                                     </button>

web/admin/scripts.js

@@ -2,16 +2,53 @@
 document.addEventListener('click', function(e) {
     if (e.target && e.target.classList.contains('copy-btn')) {
         const text = e.target.getAttribute('data-clipboard');
-        navigator.clipboard.writeText(text).then(function() {
-            const originalText = e.target.innerText;
-            e.target.innerText = "copied!";
-            setTimeout(() => {
-                e.target.innerText = originalText;
-            }, 1000);
-        });
+        
+        // Check for clipboard API support
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(text)
+                .then(function() {
+                    const originalText = e.target.innerText;
+                    e.target.innerText = "copied!";
+                    setTimeout(() => {
+                        e.target.innerText = originalText;
+                    }, 1000);
+                })
+                .catch(function(err) {
+                    console.error('Failed to copy: ', err);
+                    // Fallback method
+                    fallbackCopyTextToClipboard(text, e.target);
+                });
+        } else {
+            // Fallback for browsers without clipboard API
+            fallbackCopyTextToClipboard(text, e.target);
+        }
     }
 });
 
+// Fallback copy method for older browsers
+function fallbackCopyTextToClipboard(text, button) {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.style.position = "fixed";  // Avoid scrolling to bottom
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    
+    try {
+        const successful = document.execCommand('copy');
+        if (successful) {
+            const originalText = button.innerText;
+            button.innerText = "copied!";
+            setTimeout(() => {
+                button.innerText = originalText;
+            }, 1000);
+        }
+    } catch (err) {
+        console.error('Fallback: Unable to copy', err);
+    }
+    
+    document.body.removeChild(textArea);
+}
 // Search functionality
 function setupSearch(inputId, itemsSelector) {
     const searchInput = document.getElementById(inputId);

web/admin/styles.css

@@ -179,47 +179,46 @@ button:hover, .action-btn:hover {
     color: var(--secondary);
 }
 
-.secrets {
-    padding: 10px;
-}
-
+/* Fix for secrets layout */
 .secret {
-    margin-bottom: 10px;
-    border: 1px solid var(--border);
-    background: rgba(255, 255, 0, 0.05);
-}
-
-.secret-title {
-    border-bottom: 1px dashed var(--border);
-    padding: 5px 8px;
-    font-size: 0.9em;
-    color: var(--text-dim);
+    margin-bottom: 15px;
 }
 
 .command {
+    display: flex;
+    align-items: flex-start;
+    background-color: #111;
     padding: 8px;
-    position: relative;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.secret-content {
+    flex: 1;
+    word-break: break-all;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: monospace;
+    max-width: calc(100% - 70px);
     overflow-x: auto;
-    white-space: pre;
-    font-family: 'Courier New', monospace;
 }
 
 .copy-btn {
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    background: transparent;
-    color: var(--secondary);
-    border: 1px solid var(--border);
-    padding: 2px 5px;
+    flex: 0 0 60px;
+    margin-left: 10px;
+    align-self: flex-start;
+    background: #333;
+    color: #0f0;
+    border: 1px solid #444;
+    padding: 4px 8px;
+    border-radius: 3px;
     cursor: pointer;
-    font-size: 12px;
-    width: auto;
+    font-family: monospace;
+    text-transform: lowercase;
 }
 
 .copy-btn:hover {
-    background: var(--hover);
-    color: var(--text);
+    background: #444;
 }
 
 .alert {