From fe08fd62511c722cac1262099b9da0ea34ea736b Mon Sep 17 00:00:00 2001
From: FernandoAscencio <fernando.ascencio.cama@ericsson.com>
Date: Thu, 27 Apr 2023 14:45:14 -0400
Subject: [PATCH] styling: TreeWidget Node display change

This commit changes how nodes are displayed to bring the selected node
display in line with VS Code

Signed-Off-By: FernandoAscencio <fernando.ascencio.cama@ericsson.com>
---
 packages/core/src/browser/tree/tree-widget.tsx              | 2 +-
 .../filesystem/src/browser/file-tree/file-tree-widget.tsx   | 5 -----
 packages/scm/src/browser/scm-tree-widget.tsx                | 4 ++++
 packages/scm/src/browser/style/index.css                    | 6 +-----
 .../src/browser/search-in-workspace-result-tree-widget.tsx  | 4 ++++
 packages/search-in-workspace/src/browser/styles/index.css   | 6 ++----
 6 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/browser/tree/tree-widget.tsx b/packages/core/src/browser/tree/tree-widget.tsx
index 5d10d5d2f6ce8..75a5361a729ff 100644
--- a/packages/core/src/browser/tree/tree-widget.tsx
+++ b/packages/core/src/browser/tree/tree-widget.tsx
@@ -1420,7 +1420,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         return this.labelProvider.getLongName(node);
     }
     protected getDepthPadding(depth: number): number {
-        return depth * this.props.leftPadding;
+        return (depth + 1) * this.props.leftPadding;
     }
 }
 export namespace TreeWidget {
diff --git a/packages/filesystem/src/browser/file-tree/file-tree-widget.tsx b/packages/filesystem/src/browser/file-tree/file-tree-widget.tsx
index 845d1b738eec6..9ab83b0e6cc00 100644
--- a/packages/filesystem/src/browser/file-tree/file-tree-widget.tsx
+++ b/packages/filesystem/src/browser/file-tree/file-tree-widget.tsx
@@ -319,9 +319,4 @@ export class FileTreeWidget extends CompressedTreeWidget {
         }
         return inflated;
     }
-
-    protected override getDepthPadding(depth: number): number {
-        // add additional depth so file nodes are rendered with padding in relation to the top level root node.
-        return super.getDepthPadding(depth + 1);
-    }
 }
diff --git a/packages/scm/src/browser/scm-tree-widget.tsx b/packages/scm/src/browser/scm-tree-widget.tsx
index 210aef8505de1..6f895bd2f642c 100644
--- a/packages/scm/src/browser/scm-tree-widget.tsx
+++ b/packages/scm/src/browser/scm-tree-widget.tsx
@@ -436,6 +436,10 @@ export class ScmTreeWidget extends TreeWidget {
         return super.getPaddingLeft(node, props);
     }
 
+    protected override getDepthPadding(depth: number): number {
+        return super.getDepthPadding(depth) + 5;
+    }
+
     protected override needsExpansionTogglePadding(node: TreeNode): boolean {
         const theme = this.iconThemeService.getDefinition(this.iconThemeService.current);
         if (theme && (theme.hidesExplorerArrows || (theme.hasFileIcons && !theme.hasFolderIcons))) {
diff --git a/packages/scm/src/browser/style/index.css b/packages/scm/src/browser/style/index.css
index dfe925b95783f..def38197d761a 100644
--- a/packages/scm/src/browser/style/index.css
+++ b/packages/scm/src/browser/style/index.css
@@ -19,18 +19,14 @@
     font-size: var(--theia-ui-font-size1);
     max-height: calc(100% - var(--theia-border-width));
     position: relative;
+    padding: 5px 5px 0px 19px;
 }
 
 .theia-scm {
-    padding: 5px;
     box-sizing: border-box;
     height: 100%;
 }
 
-.theia-side-panel .theia-scm {
-    padding-left: 19px;
-}
-
 .groups-outer-container:focus {
     outline: 0;
     box-shadow: none;
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
index 7e453cbbe45e6..750989fb11f51 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
@@ -718,6 +718,10 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
         };
     }
 
+    protected override getDepthPadding(depth: number): number {
+        return super.getDepthPadding(depth) + 5;
+    }
+
     protected override renderCaption(node: TreeNode, props: NodeProps): React.ReactNode {
         if (SearchInWorkspaceRootFolderNode.is(node)) {
             return this.renderRootFolderNode(node);
diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index 97c05d86657d9..8ce9c4efd78f6 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -23,7 +23,7 @@
 }
 
 .t-siw-search-container {
-    padding: 5px ;
+    padding: 0px 1px ;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -52,8 +52,7 @@
 }
 
 .t-siw-search-container .searchHeader {
-    width: 100%;
-    margin-bottom:  10px;
+    padding: 5px 5px 15px 2px;
 }
 
 .t-siw-search-container .searchHeader .controls.button-container {
@@ -195,7 +194,6 @@
 
 .t-siw-search-container .resultContainer {
     height: 100%;
-    margin-left: 13px;
 }
 
 .t-siw-search-container .result {