From 2fe3f53ac1571d71af121224381efd55a764a1bc Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 25 May 2022 22:32:07 +0100
Subject: [PATCH] feat: fix styles

---
 packages/dockview/src/paneview/defaultPaneviewHeader.ts | 7 +++++--
 packages/dockview/src/paneview/paneview.scss            | 6 +++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/dockview/src/paneview/defaultPaneviewHeader.ts b/packages/dockview/src/paneview/defaultPaneviewHeader.ts
index f47f8f197..6f42b7db1 100644
--- a/packages/dockview/src/paneview/defaultPaneviewHeader.ts
+++ b/packages/dockview/src/paneview/defaultPaneviewHeader.ts
@@ -3,6 +3,7 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { PanelUpdateEvent } from '../panel/types';
 import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel';
+import { toggleClass } from '../dom';
 
 export class DefaultHeader
     extends CompositeDisposable
@@ -40,10 +41,12 @@ export class DefaultHeader
         this.apiRef.api = params.api;
 
         this._content.textContent = params.title;
-        this._expander.textContent = params.api.isExpanded ? '▼' : '▶';
+        this._expander.textContent = '▼';
+
+        toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
 
         this.disposable.value = params.api.onDidExpansionChange((e) => {
-            this._expander.textContent = e.isExpanded ? '▼' : '▶';
+            toggleClass(this._expander, 'collapsed', !e.isExpanded);
         });
     }
 
diff --git a/packages/dockview/src/paneview/paneview.scss b/packages/dockview/src/paneview/paneview.scss
index f4e2a9f19..77ab3a40c 100644
--- a/packages/dockview/src/paneview/paneview.scss
+++ b/packages/dockview/src/paneview/paneview.scss
@@ -31,12 +31,12 @@
             padding: 0px 8px;
             cursor: pointer;
 
-            a {
-                padding-right: 8px;
-                width: 10px;
+            .collapsed {
+                transform: rotate(-90deg);
             }
 
             > span {
+                padding-left: 8px;
                 flex-grow: 1;
             }
         }