From a17e0adf448284b5686e316570bc4f041d65ee6f Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 30 Mar 2023 08:22:40 -0700
Subject: [PATCH] Prevent header play button from being squished

---
 .../features/albums/routes/album-detail-route.tsx  |  4 ++--
 .../shared/components/library-header-bar.tsx       | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/renderer/features/albums/routes/album-detail-route.tsx b/src/renderer/features/albums/routes/album-detail-route.tsx
index f481a4b4..5edb1b82 100644
--- a/src/renderer/features/albums/routes/album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/album-detail-route.tsx
@@ -1,5 +1,5 @@
 import { NativeScrollArea } from '/@/renderer/components';
-import { AnimatedPage, LibraryHeaderBar, PlayButton } from '/@/renderer/features/shared';
+import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
@@ -42,7 +42,7 @@ const AlbumDetailRoute = () => {
           backgroundColor: background,
           children: (
             <LibraryHeaderBar>
-              <PlayButton onClick={handlePlay} />
+              <LibraryHeaderBar.PlayButton onClick={handlePlay} />
               <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
             </LibraryHeaderBar>
           ),
diff --git a/src/renderer/features/shared/components/library-header-bar.tsx b/src/renderer/features/shared/components/library-header-bar.tsx
index 060ffa3a..7cca57d4 100644
--- a/src/renderer/features/shared/components/library-header-bar.tsx
+++ b/src/renderer/features/shared/components/library-header-bar.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Group } from '@mantine/core';
+import { Group, Box } from '@mantine/core';
 import { TextTitle } from '/@/renderer/components';
 import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/play-button';
 
@@ -44,11 +44,13 @@ interface PlayButtonProps {
 
 const PlayButton = ({ onClick }: PlayButtonProps) => {
   return (
-    <PlayBtn
-      h="45px"
-      w="45px"
-      onClick={onClick}
-    />
+    <Box>
+      <PlayBtn
+        h="45px"
+        w="45px"
+        onClick={onClick}
+      />
+    </Box>
   );
 };