Adjust header styles

src/renderer/features/shared/components/library-header-bar.tsx

@@ -2,17 +2,21 @@ import { ReactNode } from 'react';
 import { Group } from '@mantine/core';
 import { TextTitle } from '/@/renderer/components';
 import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/play-button';
+import { useShouldPadTitlebar } from '/@/renderer/hooks';
 
 interface LibraryHeaderBarProps {
   children: ReactNode;
 }
 
 export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
+  const padRight = useShouldPadTitlebar();
+
   return (
     <Group
       noWrap
       align="center"
       h="100%"
+      mr={padRight ? '170px' : 0}
       px="1rem"
       spacing="xl"
     >

src/renderer/features/shared/components/library-header.tsx

@@ -143,9 +143,10 @@ export const LibraryHeader = forwardRef(
           </Group>
           <TextTitle
             fw="900"
-            lh="1.15"
+            lh="1"
             lineClamp={2}
             mt=".08em"
+            overflow="hidden"
             sx={{ fontSize: titleSize, overflow: 'hidden' }}
           >
             {title}

src/renderer/styles/mixins.ts

@@ -1,7 +1,6 @@
 import { css } from 'styled-components';
 
 export const textEllipsis = css`
-  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 `;