ui(admin-panel): responsive persons menu, XTable phone cards, full-screen form modal

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-13 09:08:38 +03:30
parent 28b0a4be38
commit 0a2466ca0c
15 changed files with 453 additions and 25 deletions
@@ -125,3 +125,50 @@ body #app .ant-menu-item-selected {
 .content-area__content > .ant-card {
  flex: 1;
 }
+
+// ── Phone page chrome ────────────────────────────────────────────────
+// Opt-in per page (class="page-card" on the page's root card) as each page is
+// made responsive. Base-form modals get the same treatment for their body.
+@media (max-width: 575px) {
+  .page-card,
+  .base-form-modal .ant-modal-body {
+    .ant-card-head {
+      min-height: 44px;
+      padding: 0 12px;
+    }
+    .ant-card-head-title {
+      font-size: 14px;
+      padding: 10px 0;
+    }
+    .ant-card-extra {
+      padding: 6px 0;
+    }
+    .ant-card-body {
+      padding: 12px;
+    }
+    .mb-base {
+      margin-bottom: 12px;
+    }
+    .ant-form-item {
+      margin-bottom: 12px;
+    }
+    .grid-2,
+    .grid-3,
+    .grid-4 {
+      row-gap: 0;
+      column-gap: 12px;
+    }
+    .ant-tabs-nav {
+      margin-bottom: 12px;
+    }
+    .form-submit {
+      width: 100%;
+      margin: 0;
+    }
+  }
+  // a nested section card inside the page card: drop the double frame
+  .page-card .ant-card .ant-card,
+  .page-card > .ant-card-body .ant-card {
+    box-shadow: none;
+  }
+}