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 {