From 03c568159a965469515c00280817e38fbe6cbe51 Mon Sep 17 00:00:00 2001
From: chintankavathia <chintankumar.kavathia@siemens.com>
Date: Tue, 25 Aug 2026 17:30:12 +0530
Subject: [PATCH] fix(tree-view): align items with and without folder state
 toggle

The start toggle slot was hardcoded to 24px while the toggle icon renders at `--si-tree-view-icon-size` (1.25rem). Leaf items were therefore indented 4px more than their foldable siblings on the same level. Reserve the actual icon size instead, so the slot also scales with the root font size and a custom icon size.

Closes #2550
---
 .../si-tree-view-item.component.html          |  2 +-
 .../si-tree-view-item.component.ts            | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html
index 06d40a6526..c40c337a4f 100644
--- a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html
+++ b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html
@@ -19,7 +19,7 @@
         <ng-container
           [ngTemplateOutlet]="toggleTemplate"
           [ngTemplateOutletContext]="{
-            biggerPaddingStart: '-' + biggerPaddingStart,
+            biggerPaddingStart: negativeBiggerPaddingStart,
             paddingStart: paddingStart,
             toggleIcon: 'si-tree-view-item-dropdown-caret'
           }"
diff --git a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts
index 1cdd42e0d9..8e265144ba 100644
--- a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts
+++ b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts
@@ -192,19 +192,27 @@ export class SiTreeViewItemComponent implements OnInit, AfterViewInit, Focusable
 
   protected readonly deleteChildrenOnCollapse = this.treeViewComponent.deleteChildrenOnCollapse;
 
-  protected get paddingStart(): string {
+  private get indentation(): number {
     return this.siTreeViewService.groupedList
-      ? '0'
-      : this.indentLevel * this.siTreeViewService.childrenIndentation + 'px';
+      ? 0
+      : this.indentLevel * this.siTreeViewService.childrenIndentation;
+  }
+
+  protected get paddingStart(): string {
+    return `${this.indentation}px`;
   }
 
+  /** Indentation plus the space the start toggle occupies, so leaf items align with foldable ones. */
   protected get biggerPaddingStart(): string {
-    const basePadding = this.showFolderStateStart ? 24 : 0;
-    return (
-      (this.siTreeViewService.groupedList
-        ? basePadding
-        : this.indentLevel * this.siTreeViewService.childrenIndentation + basePadding) + 'px'
-    );
+    return this.showFolderStateStart
+      ? `calc(${this.indentation}px + var(--si-tree-view-icon-size))`
+      : `${this.indentation}px`;
+  }
+
+  protected get negativeBiggerPaddingStart(): string {
+    return this.showFolderStateStart
+      ? `calc(${-this.indentation}px - var(--si-tree-view-icon-size))`
+      : `${-this.indentation}px`;
   }
 
   protected get isGroupedItem(): boolean {