From 121bfc956b9403816f277267e7da86be88622038 Mon Sep 17 00:00:00 2001
From: inovoselov <inovoselov@kazanworkout.ru>
Date: Fri, 24 Jul 2026 10:47:00 +0300
Subject: [PATCH] fix(web): repair API keys table layout and button styles

- Collapse long allowed-domains lists to 3 badges with a +N toggle
- Fix invisible domain badges: .badge-info used undefined --accent var
- Keep td.actions a table cell: global .actions{display:flex} broke
  row layout on every list page with an actions column
- Add missing .btn-success styles and hover states for
  .btn-warning/.btn-success (white-on-white text on hover)
---
 internal/web/static/css/style.css    | 30 ++++++++++++++++++++++++++++
 internal/web/views/apikeys_list.html | 30 +++++++++++++++++++++++++---
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/internal/web/static/css/style.css b/internal/web/static/css/style.css
index 866c369..c1db35d 100644
--- a/internal/web/static/css/style.css
+++ b/internal/web/static/css/style.css
@@ -732,6 +732,18 @@ code {
     gap: 0.5rem;
 }
 
+/* A td must stay a table cell — display:flex breaks it out of the table layout */
+td.actions {
+    display: table-cell;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+td.actions .btn,
+td.actions form {
+    margin-right: 0.25rem;
+}
+
 .actions-bar {
     display: flex;
     gap: 1rem;
@@ -761,6 +773,24 @@ code {
     color: white;
 }
 
+.btn-warning:hover {
+    background: #d97706;
+    border-color: #d97706;
+    color: white;
+}
+
+.btn-success {
+    background: var(--success);
+    border-color: var(--success);
+    color: white;
+}
+
+.btn-success:hover {
+    background: #059669;
+    border-color: #059669;
+    color: white;
+}
+
 /* Current version row highlight */
 .current-version {
     background: rgba(59, 130, 246, 0.05);
diff --git a/internal/web/views/apikeys_list.html b/internal/web/views/apikeys_list.html
index 5841ec0..8900b95 100644
--- a/internal/web/views/apikeys_list.html
+++ b/internal/web/views/apikeys_list.html
@@ -44,10 +44,14 @@ <h1>API Keys</h1>
                 <tr>
                     <td>{{.Name}}</td>
                     <td class="key-prefix">{{.KeyPrefix}}...</td>
-                    <td>
+                    <td class="domains-cell">
                         {{if .AllowedDomains}}
+                        {{$total := len .AllowedDomains}}
                         <span class="domain-badges">
-                            {{range .AllowedDomains}}<span class="badge badge-info">{{.}}</span> {{end}}
+                            {{range $i, $d := .AllowedDomains}}<span class="badge badge-info{{if ge $i 3}} domain-extra domain-hidden{{end}}">{{$d}}</span> {{end}}
+                            {{if gt $total 3}}
+                            <button type="button" class="badge badge-more" onclick="toggleDomains(this, {{sub $total 3}})">+{{sub $total 3}}</button>
+                            {{end}}
                         </span>
                         {{else}}
                         <span class="text-secondary">All</span>
@@ -220,6 +224,13 @@ <h2>Edit API Key</h2>
 
     document.getElementById('edit-modal').style.display = 'flex';
 }
+
+function toggleDomains(btn, extraCount) {
+    const badges = btn.closest('.domain-badges');
+    const collapsed = badges.querySelector('.domain-extra').classList.contains('domain-hidden');
+    badges.querySelectorAll('.domain-extra').forEach(el => el.classList.toggle('domain-hidden', !collapsed));
+    btn.textContent = collapsed ? 'less' : '+' + extraCount;
+}
 </script>
 
 <style>
@@ -315,13 +326,26 @@ <h2>Edit API Key</h2>
     width: 16px;
     height: 16px;
 }
+.domains-cell {
+    max-width: 340px;
+}
 .domain-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 0.25rem;
 }
 .badge-info {
-    background: var(--accent);
+    background: var(--primary);
+    color: white;
+    font-size: 0.75rem;
+}
+.domain-hidden {
+    display: none;
+}
+.badge-more {
+    border: none;
+    cursor: pointer;
+    background: var(--secondary);
     color: white;
     font-size: 0.75rem;
 }