From 2ca23d67deb45f747b634c645b93976a52dae3be Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 4 Oct 2025 22:24:18 +0100
Subject: [PATCH] fix: improve collapsed highlights panel button placement

- Change chevron to point right (rotation 180) when collapsed
- Position button at top-left instead of center
- Align with header position for consistency
- Adjust padding to match expanded state header

The expand button now appears at the top of the panel
next to where the highlight count would be, making it
more intuitive and consistent with the UI.
---
 src/components/HighlightsPanel.tsx | 2 +-
 src/index.css                      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx
index a4a91d17..9d9da7fc 100644
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -66,7 +66,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           title="Expand highlights panel"
           aria-label="Expand highlights panel"
         >
-          <FontAwesomeIcon icon={faChevronLeft} />
+          <FontAwesomeIcon icon={faChevronLeft} rotation={180} />
         </button>
       </div>
     )
diff --git a/src/index.css b/src/index.css
index f1e7c200..211dc0aa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1079,8 +1079,8 @@ body {
 .highlights-container.collapsed {
   display: flex;
   align-items: flex-start;
-  justify-content: center;
-  padding-top: 1rem;
+  justify-content: flex-start;
+  padding: 0.75rem 0 0 0;
   background: transparent;
   border: none;
 }