fix(web): repair API keys table layout and button styles

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+- API keys page: `.btn-warning`/`.btn-success` now use dark labels and domain badges a darker primary background to meet WCAG 4.5:1 contrast
+- API keys page: domain disclosure button now exposes `aria-expanded` and a descriptive `aria-label` for screen readers
+
 ## [0.4.19] - 2026-07-13
 
 ### Fixed

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;
@@ -758,7 +770,25 @@ code {
 .btn-warning {
     background: var(--warning);
     border-color: var(--warning);
-    color: white;
+    color: #111827;
+}
+
+.btn-warning:hover {
+    background: #d97706;
+    border-color: #d97706;
+    color: #111827;
+}
+
+.btn-success {
+    background: var(--success);
+    border-color: var(--success);
+    color: #111827;
+}
+
+.btn-success:hover {
+    background: #059669;
+    border-color: #059669;
+    color: #111827;
 }
 
 /* Current version row highlight */

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" aria-expanded="false" aria-label="Show {{sub $total 3}} more {{if eq (sub $total 3) 1}}domain{{else}}domains{{end}}" onclick="toggleDomains(this, {{sub $total 3}})">+{{sub $total 3}}</button>
+                            {{end}}
                         </span>
                         {{else}}
                         <span class="text-secondary">All</span>
@@ -220,6 +224,16 @@ <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;
+    btn.setAttribute('aria-expanded', collapsed ? 'true' : 'false');
+    const noun = extraCount === 1 ? 'domain' : 'domains';
+    btn.setAttribute('aria-label', collapsed ? 'Hide ' + extraCount + ' extra ' + noun : 'Show ' + extraCount + ' more ' + noun);
+}
 </script>
 
 <style>
@@ -315,13 +329,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-dark);
+    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;
 }