From 7d091ab9e5c8e1c9e1d66439b5805330b5557930 Mon Sep 17 00:00:00 2001
From: Leo <45669613+Hahlh@users.noreply.github.com>
Date: Thu, 8 Feb 2024 07:52:43 +0100
Subject: [PATCH] fix: defaultLayerHeader chevron rotation (#604)

---
 .changeset/blue-goats-cheer.md                              | 5 +++++
 .../layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx   | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/blue-goats-cheer.md

diff --git a/.changeset/blue-goats-cheer.md b/.changeset/blue-goats-cheer.md
new file mode 100644
index 000000000..06deecc9c
--- /dev/null
+++ b/.changeset/blue-goats-cheer.md
@@ -0,0 +1,5 @@
+---
+"@craftjs/layers": patch
+---
+
+Improve defaultLayerHeader chevron rotation
diff --git a/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx b/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx
index a0515c17a..12ef914fb 100644
--- a/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx
+++ b/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx
@@ -42,12 +42,14 @@ const StyledDiv = styled.div<{ depth: number; selected: boolean }>`
 const Expand = styled.a<{ expanded: boolean }>`
   width: 8px;
   height: 8px;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center;
   transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
   transform: rotate(${(props) => (props.expanded ? 180 : 0)}deg);
   opacity: 0.7;
   cursor: pointer;
-  transform-origin: 60% center;
 `;
 
 const Hide = styled.a<{ selected: boolean; isHidden: boolean }>`