v2.5.0: replace keys table with responsive cards

admin-web/static/styles.css

@@ -783,6 +783,79 @@ h2 {
   border-radius: 8px;
 }
 
+.keys-wrap {
+  margin-top: 14px;
+}
+
+.keys-list {
+  display: grid;
+  gap: 12px;
+}
+
+.key-card {
+  display: grid;
+  grid-template-columns:
+    minmax(150px, .85fr)
+    minmax(260px, 1.35fr)
+    minmax(200px, 1fr)
+    minmax(260px, 1.1fr)
+    minmax(210px, .9fr);
+  grid-template-areas: "user secret links traffic actions";
+  gap: 12px;
+  align-items: stretch;
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  cursor: pointer;
+  transition: background .16s ease, box-shadow .16s ease, border-color .16s ease;
+}
+
+.key-card:hover {
+  background: color-mix(in srgb, var(--blue) 7%, var(--panel));
+}
+
+.key-card.selected-row {
+  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
+  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+.key-card-user,
+.key-card-secret,
+.key-card-links,
+.key-card-traffic,
+.key-card-actions {
+  display: grid;
+  align-content: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.key-card-user { grid-area: user; }
+.key-card-secret { grid-area: secret; }
+.key-card-links { grid-area: links; }
+.key-card-traffic { grid-area: traffic; }
+.key-card-actions { grid-area: actions; }
+
+.key-card-secret code {
+  display: block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.field-label {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 table {
   width: 100%;
   min-width: 720px;
@@ -863,6 +936,10 @@ td small {
   color: var(--muted);
 }
 
+.key-name-button small {
+  color: var(--muted);
+}
+
 .action-buttons {
   display: flex;
   align-items: center;
@@ -899,6 +976,24 @@ td small {
   flex-wrap: nowrap;
 }
 
+.key-card .mini-actions,
+.key-card .action-buttons {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-content: center;
+  align-items: stretch;
+  gap: 8px;
+  width: 100%;
+}
+
+.key-card .mini-actions button,
+.key-card .action-buttons button {
+  width: 100%;
+  min-height: 44px;
+  white-space: normal;
+  line-height: 1.2;
+}
+
 .traffic-cell {
   display: grid;
   gap: 10px;
@@ -1310,6 +1405,14 @@ td small {
 }
 
 @media (max-width: 1280px) {
+  .key-card {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-areas:
+      "user traffic"
+      "secret links"
+      "actions actions";
+  }
+
   .service-grid {
     grid-template-columns: repeat(3, minmax(150px, 1fr));
   }
@@ -1488,6 +1591,16 @@ td small {
     flex-direction: column;
   }
 
+  .key-card {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "user"
+      "secret"
+      "links"
+      "traffic"
+      "actions";
+  }
+
   .ip-limit-control {
     grid-template-columns: 1fr;
   }