core: improve tree selection styling (#12470)

The commit updates the selection of tree nodes to properly select the entire available space similarly to VS Code.
The previous implementation would often display "gaps" as there was additional padding to the tree which prevented the complete selection.

Signed-off-by: FernandoAscencio <fernando.ascencio.cama@ericsson.com>

packages/scm/src/browser/scm-tree-widget.tsx

@@ -445,6 +445,10 @@ export class ScmTreeWidget extends TreeWidget {
         return super.getPaddingLeft(node, props);
     }
 
+    protected override getDepthPadding(depth: number): number {
+        return super.getDepthPadding(depth) + 5;
+    }
+
     protected isCurrentThemeLight(): boolean {
         const type = this.themeService.getCurrentTheme().type;
         return type.toLocaleLowerCase().includes('light');

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 {
@@ -208,7 +207,6 @@
 
 .t-siw-search-container .resultContainer {
   height: 100%;
-  margin-left: 13px;
 }
 
 .t-siw-search-container .result {