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

@@ -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 {

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);
-    }
 }

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))) {

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;

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);

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 {