Merge pull request #8446 from gitbutlerapp/improve-tree-view-performanceLane

Performance: It turns out that height 100% in list items is causing performance issues

Author: krlvi

packages/ui/src/lib/file/FileIndent.svelte

@@ -9,7 +9,7 @@
 {#if depth && depth > 0}
 	<div class="indent-wrapper">
 		{#each Array(depth) as _}
-			<div class="indent-wrapper__line" style="height: 100%;"></div>
+			<div class="indent-wrapper__line"></div>
 		{/each}
 	</div>
 {/if}
@@ -19,14 +19,14 @@
 		display: flex;
 		align-items: center;
 		/* background-color: rgba(0, 0, 0, 0.1); */
-		height: 100%;
+		/* height: 100%; */
 		gap: 6px;
 	}
 
 	.indent-wrapper__line {
 		position: relative;
 		width: 10px;
-		height: 100%;
+		/* height: 100%; */
 		/* background-color: rgba(0, 0, 0, 0.1); */
 
 		&:before {
@@ -35,7 +35,7 @@
 			top: -50%;
 			left: 50%;
 			width: 1px;
-			height: 200%;
+			/* height: 200%; */
 			transform: translateX(-50%);
 			background-color: var(--clr-border-1);
 			opacity: 0.4;

packages/ui/src/lib/file/FileListItemV3.svelte

@@ -218,7 +218,7 @@
 		display: flex;
 		align-items: center;
 		gap: 6px;
-		height: 100%;
+		/* height: 100%; */
 	}
 
 	.draggable-handle {

packages/ui/src/lib/file/FolderListItem.svelte

@@ -110,7 +110,7 @@
 		align-items: center;
 		gap: 6px;
 		color: var(--clr-text-2);
-		height: 100%;
+		/* height: 100%; */
 	}
 
 	.folder-list-item__arrow {