From 473573796eb6c7cc47f32a67f72859541a9aaff6 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 9 Jun 2021 23:32:32 +0800
Subject: [PATCH] chore: optimize file tree actions

---
 src/components/Node.tsx |  2 +-
 src/styles/index.scss   | 47 +++++++++++++++++++++++++++--------------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/Node.tsx b/src/components/Node.tsx
index 42eee55..8fa2ff0 100644
--- a/src/components/Node.tsx
+++ b/src/components/Node.tsx
@@ -62,7 +62,7 @@ export function Node({
         <NodeItemIcon node={node} open={expanded} loading={loading} />
         {renderLabelText(node)}
       </div>
-      {renderActions && <div>{renderActions(node)}</div>}
+      {renderActions && <div className={'actions'}>{renderActions(node)}</div>}
     </a>
   )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f71ca08..e7971d1 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -718,28 +718,43 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             }
           }
 
-          .node-item-comment {
-            display: inline-block;
-            width: 48px;
-            padding: 0 4px;
-            color: var(--gitako-text-tertiary);
+          .actions {
+            z-index: 1; // prevent being covered by next .node-item
+            padding-right: 8px;
 
-            .octicon-wrapper {
-              margin: 0; // make it closer to the comment amount label
+            .node-item-comment {
+              display: inline-block;
+              width: 48px;
+              padding: 0 4px;
+              color: var(--gitako-text-tertiary);
+
+              .octicon-wrapper {
+                margin: 0; // make it closer to the comment amount label
+              }
+            }
+
+            .go-to-button,
+            .find-in-folder-button {
+              @include icon-button();
+              width: 28px;
+              height: 28px;
+              border-radius: 28px;
+              white-space: nowrap;
+              .octicon-wrapper {
+                margin-right: 0;
+              }
             }
           }
 
-          .go-to-button,
-          .find-in-folder-button {
-            @include icon-button();
-            width: 28px;
-            height: 28px;
-            border-radius: 28px;
-            white-space: nowrap;
-            .octicon-wrapper {
-              margin-right: 0;
+          &.compact {
+            .go-to-button,
+            .find-in-folder-button {
+              border-radius: 4px;
+              width: 20px;
+              height: 20px;
             }
           }
+
           &:not(:hover) {
             .go-to-button,
             .find-in-folder-button {