From b45e75737eb86802eedaaf5cd5a72805a443b34f Mon Sep 17 00:00:00 2001
From: Luke Cotter <4013877+lukecotter@users.noreply.github.com>
Date: Fri, 19 Jun 2026 17:12:00 +0100
Subject: [PATCH] feat(data-grid): use codicon chevrons for group and tree
 controls

- replace upstream's border-triangle group-header arrow with codicon chevron-right/down via ::before
- replace boxed +/- data-tree control with the same chevrons, keeping the 16px footprint so tree indentation is unchanged
---
 log-viewer/src/tabulator/style/DataGrid.scss | 69 ++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/log-viewer/src/tabulator/style/DataGrid.scss b/log-viewer/src/tabulator/style/DataGrid.scss
index 0713775e..dba447c4 100644
--- a/log-viewer/src/tabulator/style/DataGrid.scss
+++ b/log-viewer/src/tabulator/style/DataGrid.scss
@@ -39,6 +39,15 @@ $footerBorderColor: transparent; //footer border color
 $footerSeparatorColor: transparent; //footer bottom separator color
 $footerActiveColor: #d00 !default; //footer bottom active text color
 
+$codicon-chevron-right: '\eab6';
+$codicon-chevron-down: '\eab4';
+
+@mixin codicon-chevron {
+  font-family: 'codicon';
+  font-size: 14px;
+  line-height: 16px;
+}
+
 // Demote upstream tabulator styles (and our scss-mixin partials that build
 // on them) into a cascade layer so any unlayered rule — at any specificity —
 // wins. The neutralising overrides for upstream's hard-coded colours go
@@ -97,6 +106,27 @@ $footerActiveColor: #d00 !default; //footer bottom active text color
           background-color: $rowHoverBackground;
         }
 
+        .tabulator-arrow {
+          width: 16px;
+          height: 16px;
+          margin-right: 4px;
+          border: none;
+          text-align: center;
+
+          &::before {
+            @include codicon-chevron;
+            content: $codicon-chevron-right;
+          }
+        }
+
+        &.tabulator-group-visible .tabulator-arrow {
+          border: none; // override upstream's more-specific expanded-state border
+
+          &::before {
+            content: $codicon-chevron-down;
+          }
+        }
+
         // Neutralise upstream `.tabulator-row.tabulator-group span { color: #d00 }`
         // so plain text in group headers inherits the theme foreground. Lives in
         // the same layer as the rule it's overriding — that keeps it out of the
@@ -108,6 +138,45 @@ $footerActiveColor: #d00 !default; //footer bottom active text color
       }
     }
 
+    .tabulator-row .tabulator-cell .tabulator-data-tree-control {
+      height: 16px;
+      width: 16px;
+      margin-right: 0;
+      border: none;
+      border-radius: 0;
+      background: transparent;
+      text-indent: 0; // cancel the name cell's hanging indent so the glyph stays in the control box
+
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      .tabulator-data-tree-control-expand,
+      .tabulator-data-tree-control-collapse {
+        height: auto;
+        width: auto;
+        background: transparent;
+
+        &::after {
+          content: none;
+        }
+
+        &::before {
+          @include codicon-chevron;
+        }
+      }
+
+      .tabulator-data-tree-control-expand::before {
+        content: $codicon-chevron-right;
+      }
+
+      .tabulator-data-tree-control-collapse::before {
+        content: $codicon-chevron-down;
+      }
+    }
+
     .datagrid-code-text {
       font-family: monospace;
       font-weight: var(--vscode-font-weight, normal);