From b39bb958cc44511c3590e832f77cebdf70616b8c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 21 Oct 2023 12:38:19 +0200
Subject: Improve diff tree spacing (#27714)

1. Un-indent top-level items, matching GitHub rendering
2. Increase item padding and add 1px gap between items

Before and After:

<img width="247" alt="Screenshot 2023-10-20 at 18 37 32"
src="https://github.com/go-gitea/gitea/assets/115237/43c1ce86-1814-4a8a-9dd2-0c4a82a2be7c">
<img width="241" alt="Screenshot 2023-10-20 at 18 40 46"
src="https://github.com/go-gitea/gitea/assets/115237/b541b85b-c428-4903-becd-773ae5807495">

---------

Co-authored-by: 6543 <m.huber@kithara.com>
---
 web_src/js/components/DiffFileTree.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'web_src/js/components/DiffFileTree.vue')

diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 6136f7b947..3686629df8 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="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,11 @@ export default {
     </div>
   </div>
 </template>
+<style scoped>
+.diff-file-tree-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-right: .5rem;
+}
+</style>
-- 
cgit v1.2.3