From 1e27d6ba71c6674d23ba20aa114a4c926845ec85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B8=D1=82=D0=B0=D0=BB=D0=B8=D0=B9=20=D0=9B=D0=B8?=
 =?UTF-8?q?=D1=82=D0=B2=D0=B8=D0=BD=D0=BE=D0=B2?=
 <vitalijlitvinov@MacBook-Pro-Vitalij.local>
Date: Sat, 25 Apr 2026 15:27:58 +0300
Subject: [PATCH] v2.5.0: make key table responsive

---
 admin-web/static/index.html |  2 +-
 admin-web/static/styles.css | 70 +++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/admin-web/static/index.html b/admin-web/static/index.html
index e187059..60749ea 100644
--- a/admin-web/static/index.html
+++ b/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>
diff --git a/admin-web/static/styles.css b/admin-web/static/styles.css
index 1587edf..e7a0a00 100644
--- a/admin-web/static/styles.css
+++ b/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));