From ad23e81a43cab3189d6debfc8622063b71fba4b2 Mon Sep 17 00:00:00 2001
From: Sergey Antropoff <inecs@MacBook-Air-Sergey.local>
Date: Thu, 23 Jul 2026 09:16:45 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D1=82=D1=8C=20li?=
 =?UTF-8?q?ghtbox=20=D0=BD=D0=B0=20=D0=B2=D1=81=D1=8E=20=D0=B2=D1=8B=D1=81?=
 =?UTF-8?q?=D0=BE=D1=82=D1=83=20=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D1=81=20=D0=BD=D0=B5=D0=B1=D0=BE=D0=BB=D1=8C=D1=88=D0=B8=D0=BC?=
 =?UTF-8?q?=D0=B8=20=D0=BE=D1=82=D1=81=D1=82=D1=83=D0=BF=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Панель занимает 100dvh минус 1rem сверху/снизу; QR растягивается
в оставшееся пространство.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../templates/export/global-index.html.j2     | 32 +++++++++++++------
 .../hysteria2/templates/export/index.html.j2  | 32 +++++++++++++------
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/roles/hysteria2/templates/export/global-index.html.j2 b/roles/hysteria2/templates/export/global-index.html.j2
index 911ce8d..ff0c12e 100644
--- a/roles/hysteria2/templates/export/global-index.html.j2
+++ b/roles/hysteria2/templates/export/global-index.html.j2
@@ -262,7 +262,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 1.75rem 1rem;
+      padding: 1rem;
       box-sizing: border-box;
       background: rgba(8, 12, 18, 0.72);
       backdrop-filter: blur(10px);
@@ -279,16 +279,19 @@
     }
     .lightbox-panel {
       position: relative;
-      max-width: min(94vw, 832px);
-      max-height: calc(100dvh - 3.5rem);
-      width: 100%;
+      display: flex;
+      flex-direction: column;
+      width: min(94vw, 900px);
+      height: calc(100dvh - 2rem);
+      max-height: calc(100dvh - 2rem);
       padding: 1.25rem 1.25rem 1rem;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 18px;
       box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
       text-align: center;
-      overflow: auto;
+      overflow: hidden;
+      box-sizing: border-box;
       transform: translateY(12px) scale(0.96);
       transition: transform 0.22s ease;
     }
@@ -297,11 +300,10 @@
     }
     .lightbox-panel img {
       display: block;
+      max-width: 100%;
+      max-height: 100%;
       width: auto;
       height: auto;
-      max-width: min(728px, 100%);
-      max-height: min(728px, calc(100dvh - 14rem));
-      margin: 0 auto;
       aspect-ratio: 1;
       object-fit: contain;
       background: #fff;
@@ -310,18 +312,28 @@
       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;
       font-size: 0.95rem;
       font-weight: 650;
       color: var(--text);
     }
     .lightbox-hint {
+      flex-shrink: 0;
       margin-top: 0.25rem;
       font-size: 0.75rem;
       color: var(--muted);
     }
     .lightbox-actions {
+      flex-shrink: 0;
       margin-top: 1rem;
       display: flex;
       justify-content: center;
@@ -522,7 +534,9 @@
   <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="lightbox-caption">
     <div class="lightbox-panel" role="document">
       <button type="button" class="lightbox-close" id="lightbox-close" aria-label="Закрыть">&times;</button>
-      <img id="lightbox-img" src="" alt="">
+      <div class="lightbox-media">
+        <img id="lightbox-img" src="" alt="">
+      </div>
       <p class="lightbox-caption" id="lightbox-caption"></p>
       <div class="lightbox-actions">
         <a class="lightbox-download" id="lightbox-download" href="#" download>
diff --git a/roles/hysteria2/templates/export/index.html.j2 b/roles/hysteria2/templates/export/index.html.j2
index cdaab5a..b92256a 100644
--- a/roles/hysteria2/templates/export/index.html.j2
+++ b/roles/hysteria2/templates/export/index.html.j2
@@ -193,7 +193,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 1.75rem 1rem;
+      padding: 1rem;
       box-sizing: border-box;
       background: rgba(8, 12, 18, 0.72);
       backdrop-filter: blur(10px);
@@ -210,16 +210,19 @@
     }
     .lightbox-panel {
       position: relative;
-      max-width: min(94vw, 832px);
-      max-height: calc(100dvh - 3.5rem);
-      width: 100%;
+      display: flex;
+      flex-direction: column;
+      width: min(94vw, 900px);
+      height: calc(100dvh - 2rem);
+      max-height: calc(100dvh - 2rem);
       padding: 1.25rem 1.25rem 1rem;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 18px;
       box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
       text-align: center;
-      overflow: auto;
+      overflow: hidden;
+      box-sizing: border-box;
       transform: translateY(12px) scale(0.96);
       transition: transform 0.22s ease;
     }
@@ -228,11 +231,10 @@
     }
     .lightbox-panel img {
       display: block;
+      max-width: 100%;
+      max-height: 100%;
       width: auto;
       height: auto;
-      max-width: min(728px, 100%);
-      max-height: min(728px, calc(100dvh - 14rem));
-      margin: 0 auto;
       aspect-ratio: 1;
       object-fit: contain;
       background: #fff;
@@ -241,18 +243,28 @@
       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;
       font-size: 0.95rem;
       font-weight: 650;
       color: var(--text);
     }
     .lightbox-hint {
+      flex-shrink: 0;
       margin-top: 0.25rem;
       font-size: 0.75rem;
       color: var(--muted);
     }
     .lightbox-actions {
+      flex-shrink: 0;
       margin-top: 1rem;
       display: flex;
       justify-content: center;
@@ -444,7 +456,9 @@
   <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="lightbox-caption">
     <div class="lightbox-panel" role="document">
       <button type="button" class="lightbox-close" id="lightbox-close" aria-label="Закрыть">&times;</button>
-      <img id="lightbox-img" src="" alt="">
+      <div class="lightbox-media">
+        <img id="lightbox-img" src="" alt="">
+      </div>
       <p class="lightbox-caption" id="lightbox-caption"></p>
       <div class="lightbox-actions">
         <a class="lightbox-download" id="lightbox-download" href="#" download>