Coder/photo-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: исправление наложения кнопок в дереве истории версий
All checks were successful
test / test (push) Successful in 9s
Details

Browse Source 
- Переведён .history-node с flex на grid (main + actions в колонках)
- Убрано абсолютное позиционирование .history-node-actions
- Починена вертикальность поддерева (grid-column: 1 / -1)
- Инкрементальная индентация через padding-left на контейнерах
- Адаптивность: на ≤460px действия переносятся под кнопку
- overflow-x: hidden на списке истории для предотвращения скролла
- Бамп стиля v=13 → v=14 (сброс кэша)
This commit is contained in:
Coder
2026-08-27 22:45:07 +07:00
parent 6d5b8d5f05
commit 6f611dc697
2 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -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"
>
<link rel="stylesheet" href="/style.css?v=12">
<link rel="stylesheet" href="/style.css?v=14">
</head>
<body>
<header class="topbar">

43
public/style.css
View File

@@ -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 {