From 7182748b166bb4d9cf54486952d62cfaf93e3f6c Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Tue, 23 Apr 2024 12:18:37 -0400
Subject: [PATCH] fix overlapping tree actions

---
 style.css | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index 352b5565b..82377c41b 100644
--- a/style.css
+++ b/style.css
@@ -1513,16 +1513,16 @@ body.resizing .resize-handle {
     text-align: center;
 }
 
+.tree-list-item[data-selected] {
+    background: var(--button-secondary-background-fill);
+}
+
 .tree-list-item:hover {
     -webkit-transition: all 0.05s ease-in-out;
     transition: all 0.05s ease-in-out;
     background: var(--button-secondary-background-fill-hover);
 }
 
-.tree-list-item[data-selected] {
-    background: var(--button-secondary-background-fill);
-}
-
 .tree-list-item>span {
     font-size: var(--button-large-text-size);
     color: var(--button-secondary-text-color);
@@ -1612,8 +1612,17 @@ body.resizing .resize-handle {
     visibility: hidden;
 }
 
+/* Allow trailing action to overlap previous columns when area is too small. */
 .tree-list-item-action--trailing {
-    grid-area: trailing-action;
+    z-index: 10;
+    grid-area: 1 / label / 1 / trailing-action;
+    justify-self: end;
+    padding-left: var(--spacing-sm);
+}
+
+/* Force background color on hover to hide any overlapped column content. */
+.tree-list-item:hover .tree-list-item-action--trailing {
+    background: var(--button-secondary-background-fill-hover);
 }
 
 .tree-list-item .button-row {