Сетка карточек на странице сервера и крупный QR в lightbox

Карточки как в глобальном индексе; QR заполняет доступную
площадь модального окна через container queries.

roles/hysteria2/templates/export/global-index.html.j2

@@ -456,10 +456,10 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      width: min(94vw, 900px);
+      width: min(96vw, calc(100dvh - 2rem));
       height: calc(100dvh - 2rem);
       max-height: calc(100dvh - 2rem);
-      padding: 1.25rem 1.25rem 1rem;
+      padding: 2.5rem 1rem 0.85rem;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 18px;
@@ -474,40 +474,41 @@
     .lightbox-media {
       flex: 1 1 auto;
       min-height: 0;
-      display: flex;
+      width: 100%;
-      align-items: center;
+      container-type: size;
-      justify-content: center;
+      display: grid;
+      place-items: center;
     }
     .lightbox-panel img {
       display: block;
+      width: min(100cqi, 100cqb);
+      height: min(100cqi, 100cqb);
       max-width: 100%;
       max-height: 100%;
-      width: auto;
-      height: auto;
       aspect-ratio: 1;
       object-fit: contain;
       background: #fff;
       border-radius: 12px;
-      padding: 1rem;
+      padding: 0.75rem;
       box-sizing: border-box;
       image-rendering: pixelated;
     }
     .lightbox-caption {
       flex-shrink: 0;
-      margin-top: 0.85rem;
+      margin-top: 0.55rem;
       font-size: 0.95rem;
       font-weight: 650;
       color: var(--text);
     }
     .lightbox-hint {
       flex-shrink: 0;
-      margin-top: 0.25rem;
+      margin-top: 0.15rem;
       font-size: 0.75rem;
       color: var(--muted);
     }
     .lightbox-actions {
       flex-shrink: 0;
-      margin-top: 1rem;
+      margin-top: 0.65rem;
       display: flex;
       justify-content: center;
     }

roles/hysteria2/templates/export/index.html.j2

@@ -44,10 +44,10 @@
       min-height: 100vh;
       padding: 2rem 1rem 3rem;
     }
-    .container { max-width: 720px; margin: 0 auto; }
+    .container { max-width: 1080px; margin: 0 auto; }
     header {
       text-align: center;
-      margin-bottom: 2.5rem;
+      margin-bottom: 2rem;
       padding: 2rem 1.5rem;
       background: linear-gradient(135deg, var(--accent-soft), transparent);
       border: 1px solid var(--border);
@@ -83,18 +83,26 @@
     .server-obfs {
       margin-top: 1.25rem;
       max-width: 100%;
+      text-align: left;
+    }
+    .users-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1rem;
     }
     .user-card {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
-      padding: 1.5rem;
+      padding: 1.25rem;
-      margin-bottom: 1.25rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.85rem;
     }
     .user-card h2 {
-      font-size: 1.25rem;
+      font-size: 1.05rem;
-      margin-bottom: 1rem;
+      margin-bottom: 0;
       display: flex;
       align-items: center;
       gap: 0.5rem;
@@ -107,7 +115,7 @@
       background: var(--success);
       box-shadow: 0 0 8px var(--success);
     }
-    .field { margin-bottom: 1rem; }
+    .field { margin-bottom: 0; }
     .field label {
       display: block;
       font-size: 0.75rem;
@@ -164,8 +172,8 @@
     .btn-copy svg { width: 18px; height: 18px; }
     .qr-block {
       text-align: center;
-      margin: 1.25rem 0;
+      margin: 0;
-      padding: 1rem;
+      padding: 0.75rem;
       background: #fff;
       border-radius: 8px;
       border: 1px solid var(--border);
@@ -212,10 +220,10 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      width: min(94vw, 900px);
+      width: min(96vw, calc(100dvh - 2rem));
       height: calc(100dvh - 2rem);
       max-height: calc(100dvh - 2rem);
-      padding: 1.25rem 1.25rem 1rem;
+      padding: 2.5rem 1rem 0.85rem;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 18px;
@@ -229,43 +237,44 @@
     .lightbox.open .lightbox-panel {
       transform: translateY(0) scale(1);
     }
+    .lightbox-media {
+      flex: 1 1 auto;
+      min-height: 0;
+      width: 100%;
+      container-type: size;
+      display: grid;
+      place-items: center;
+    }
     .lightbox-panel img {
       display: block;
+      width: min(100cqi, 100cqb);
+      height: min(100cqi, 100cqb);
       max-width: 100%;
       max-height: 100%;
-      width: auto;
-      height: auto;
       aspect-ratio: 1;
       object-fit: contain;
       background: #fff;
       border-radius: 12px;
-      padding: 1rem;
+      padding: 0.75rem;
       box-sizing: border-box;
       image-rendering: pixelated;
     }
-    .lightbox-media {
-      flex: 1 1 auto;
-      min-height: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
     .lightbox-caption {
       flex-shrink: 0;
-      margin-top: 0.85rem;
+      margin-top: 0.55rem;
       font-size: 0.95rem;
       font-weight: 650;
       color: var(--text);
     }
     .lightbox-hint {
       flex-shrink: 0;
-      margin-top: 0.25rem;
+      margin-top: 0.15rem;
       font-size: 0.75rem;
       color: var(--muted);
     }
     .lightbox-actions {
       flex-shrink: 0;
-      margin-top: 1rem;
+      margin-top: 0.65rem;
       display: flex;
       justify-content: center;
     }
@@ -320,8 +329,8 @@
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem;
-      margin-top: 1rem;
+      margin-top: auto;
-      padding-top: 1rem;
+      padding-top: 0.75rem;
       border-top: 1px solid var(--border);
     }
     .files a {
@@ -394,6 +403,7 @@
       </div>
     </header>
 
+    <div class="users-grid">
 {% for user in hysteria2_export_users %}
     <article class="user-card">
       <h2>{{ user.name }}</h2>
@@ -445,6 +455,7 @@
       </nav>
     </article>
 {% endfor %}
+    </div>
 
     <footer>
       Сгенерировано Ansible · {{ generated_at | default('') }}