Prevent header play button from being squished

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>
           ),

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
+    <Box>
-      h="45px"
+      <PlayBtn
-      w="45px"
+        h="45px"
-      onClick={onClick}
+        w="45px"
-    />
+        onClick={onClick}
+      />
+    </Box>
   );
 };