From 6f611dc69764d33fb7ac3350327db86b673a5fe6 Mon Sep 17 00:00:00 2001 From: Coder Date: Thu, 27 Aug 2026 22:45:07 +0700 Subject: [PATCH] =?UTF-8?q?fix:=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BD=D0=B0=D0=BB=D0=BE=D0=B6?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA?= =?UTF-8?q?=20=D0=B2=20=D0=B4=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=20=D0=B8=D1=81?= =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B8=D0=B8=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8?= =?UTF-8?q?=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Переведён .history-node с flex на grid (main + actions в колонках) - Убрано абсолютное позиционирование .history-node-actions - Починена вертикальность поддерева (grid-column: 1 / -1) - Инкрементальная индентация через padding-left на контейнерах - Адаптивность: на ≤460px действия переносятся под кнопку - overflow-x: hidden на списке истории для предотвращения скролла - Бамп стиля v=13 → v=14 (сброс кэша) --- public/index.html | 2 +- public/style.css | 43 +++++++++++++++++++++++++++++++++---------- 2 files changed, 34 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 27f553e..ac89505 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%23202321'/%3E%3Ctext x='32' y='45' font-size='38' font-weight='bold' text-anchor='middle' fill='%23ffffff' font-family='sans-serif'%3E%D0%9A%3C/text%3E%3C/svg%3E" > - +
diff --git a/public/style.css b/public/style.css index fead694..e73a33c 100644 --- a/public/style.css +++ b/public/style.css @@ -877,6 +877,20 @@ textarea:disabled { .local-badge { padding: 7px 9px; } + + .history-node { + grid-template-columns: minmax(0, 1fr); + overflow: hidden !important; + } + + .history-node.is-root { + grid-template-columns: auto minmax(0, 1fr); + } + + .history-node-actions { + grid-column: 1 / -1; + justify-self: end; + } } @media (prefers-reduced-motion: reduce) { @@ -919,7 +933,7 @@ textarea:disabled { .history-list { display: grid; gap: 14px; - overflow-y: auto; + overflow: hidden auto; padding: 4px 4px 10px; } @@ -940,12 +954,15 @@ textarea:disabled { text-transform: uppercase; } +.history-group-body { + padding-left: 18px; +} + .history-node { - position: relative; - display: flex; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; - margin-left: calc(var(--depth, 0) * 18px); padding: 5px 6px; border: 1.5px solid transparent; border-radius: var(--radius-small); @@ -953,6 +970,11 @@ textarea:disabled { border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; + min-width: 0; +} + +.history-node.is-root { + grid-template-columns: auto minmax(0, 1fr) auto; } .history-node:hover { @@ -985,7 +1007,6 @@ textarea:disabled { .history-node-main { display: grid; - flex: 1 1 auto; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; @@ -1054,24 +1075,26 @@ textarea:disabled { } .history-node-children { + grid-column: 1 / -1; display: grid; + min-width: 0; gap: 6px; + padding-left: 18px; } .history-node-actions { - position: absolute; - top: 50%; - right: 8px; - transform: translateY(-50%); display: flex; + align-items: center; gap: 6px; opacity: 0; - transition: opacity 0.15s ease; + visibility: hidden; + transition: opacity 0.15s ease, visibility 0.15s ease; } .history-node:hover .history-node-actions, .history-node:focus-within .history-node-actions { opacity: 1; + visibility: visible; } .history-node-action {