v2.5.0: make key table responsive

admin-web/static/index.html

@@ -400,6 +400,6 @@
       </div>
     </div>
   </div>
-  <script src="/app.js?v=2.5.0-admin13" type="module"></script>
+  <script src="/app.js?v=2.5.0-admin14" type="module"></script>
 </body>
 </html>

admin-web/static/styles.css

@@ -1202,6 +1202,76 @@ td small {
   font-size: 12px;
 }
 
+@media (max-width: 1180px) {
+  .keys-table {
+    min-width: 0;
+    table-layout: auto;
+  }
+
+  .keys-table,
+  .keys-table thead,
+  .keys-table tbody,
+  .keys-table tr,
+  .keys-table th,
+  .keys-table td {
+    display: block;
+    width: 100%;
+  }
+
+  .keys-table thead {
+    display: none;
+  }
+
+  .keys-table tr {
+    margin-bottom: 12px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: var(--panel);
+    overflow: hidden;
+  }
+
+  .keys-table tr:last-child {
+    margin-bottom: 0;
+  }
+
+  .keys-table td {
+    display: grid;
+    grid-template-columns: 132px minmax(0, 1fr);
+    gap: 12px;
+    width: 100% !important;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .keys-table td::before {
+    content: attr(data-label);
+    color: var(--muted);
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+
+  .keys-table tr:last-child td,
+  .keys-table td:last-child {
+    border-bottom: 0;
+  }
+
+  .keys-table td code {
+    max-width: 100%;
+    white-space: nowrap;
+  }
+
+  .keys-table .mini-actions,
+  .keys-table .action-buttons {
+    justify-content: stretch;
+    flex-wrap: wrap;
+  }
+
+  .keys-table .mini-actions button,
+  .keys-table .action-buttons button {
+    flex: 1 1 130px;
+  }
+}
+
 @media (max-width: 1280px) {
   .service-grid {
     grid-template-columns: repeat(3, minmax(150px, 1fr));