From ec147a8a932c4e0a8d4c80e6de49bc4ccf5aca9a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 20 Oct 2023 18:15:45 +0200
Subject: [PATCH 1/3] Improve diff tree spacing

---
 web_src/js/components/DiffFileTreeItem.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 553ab1464f5ad..7c83511225063 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -61,8 +61,8 @@ a, a:hover {
   padding-left: 9px;
 }
 
-.item-file {
-  margin-left: 20px;
+.item-file + .item-file {
+  margin-top: 2px;
 }
 
 .item-file.selected {
@@ -80,7 +80,7 @@ a, a:hover {
   display: flex;
   align-items: center;
   gap: 0.25em;
-  padding: 2px;
+  padding: 3px 6px;
 }
 
 .item-file:hover,

From bfb4b041aff4be48b1a83d9b72bf189e619e0d92 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 20 Oct 2023 18:36:52 +0200
Subject: [PATCH 2/3] fixes

---
 web_src/js/components/DiffFileTree.vue     | 9 ++++++++-
 web_src/js/components/DiffFileTreeItem.vue | 9 ++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 6136f7b947546..e86ad063bf60b 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -126,7 +126,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="store.fileTreeIsVisible" class="gt-mr-3">
+  <div v-if="store.fileTreeIsVisible" class="gt-mr-3 diff-file-tree-items">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
     <div v-if="store.isIncomplete" class="gt-pt-2">
@@ -134,3 +134,10 @@ export default {
     </div>
   </div>
 </template>
+<style scoped>
+.diff-file-tree-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+</style>
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 7c83511225063..a49e198b691bf 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -58,11 +58,14 @@ a, a:hover {
 }
 
 .sub-items {
-  padding-left: 9px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-left: 7px;
 }
 
-.item-file + .item-file {
-  margin-top: 2px;
+.sub-items .item-file {
+  padding-left: 24px;
 }
 
 .item-file.selected {

From e15c42261159689ea35219cd80e4364d23ae91a3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 20 Oct 2023 18:43:23 +0200
Subject: [PATCH 3/3] use css, add 1px

---
 web_src/js/components/DiffFileTree.vue     | 3 ++-
 web_src/js/components/DiffFileTreeItem.vue | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index e86ad063bf60b..3686629df895f 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -126,7 +126,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="store.fileTreeIsVisible" class="gt-mr-3 diff-file-tree-items">
+  <div v-if="store.fileTreeIsVisible" class="diff-file-tree-items">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
     <div v-if="store.isIncomplete" class="gt-pt-2">
@@ -139,5 +139,6 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 1px;
+  margin-right: .5rem;
 }
 </style>
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index a49e198b691bf..22c23f3ca0c1d 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -61,7 +61,7 @@ a, a:hover {
   display: flex;
   flex-direction: column;
   gap: 1px;
-  padding-left: 7px;
+  padding-left: 8px;
 }
 
 .sub-items .item-file {