From 2647c363266b9bea886718320a050d5cca64802e Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 11 Feb 2026 21:31:17 -0800
Subject: [PATCH] add compact styling to LibraryHeader

---
 .../playlist-detail-song-list-header.tsx      |  1 +
 .../components/library-header.module.css      | 46 +++++++++++++++++++
 .../shared/components/library-header.tsx      | 12 ++++-
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
index 43e71adaa..97a6f3aa8 100644
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
@@ -93,6 +93,7 @@ export const PlaylistDetailSongListHeader = ({
                 </PageHeader>
             ) : (
                 <LibraryHeader
+                    compact
                     imageUrl={imageUrl}
                     item={{
                         imageId: detailQuery?.data?.imageId,
diff --git a/src/renderer/features/shared/components/library-header.module.css b/src/renderer/features/shared/components/library-header.module.css
index f6ac4165d..2acfa6891 100644
--- a/src/renderer/features/shared/components/library-header.module.css
+++ b/src/renderer/features/shared/components/library-header.module.css
@@ -56,6 +56,52 @@
             height: 250px;
         }
     }
+
+    &.compact {
+        min-height: unset;
+        padding: var(--theme-spacing-md) var(--theme-spacing-xs);
+
+        :global(.item-image-placeholder) {
+            width: 250px !important;
+            height: 250px;
+        }
+
+        .image {
+            width: 250px !important;
+            height: 250px;
+        }
+
+        @container (min-width: $mantine-breakpoint-sm) {
+            grid-template-columns: 200px minmax(0, 1fr);
+            min-height: unset;
+            padding: var(--theme-spacing-md) var(--theme-spacing-sm);
+
+            .image {
+                width: 200px !important;
+                height: 200px;
+            }
+
+            :global(.item-image-placeholder) {
+                width: 200px !important;
+                height: 200px;
+            }
+        }
+
+        @container (min-width: $mantine-breakpoint-lg) {
+            grid-template-columns: 200px minmax(0, 1fr);
+            padding: var(--theme-spacing-md) var(--theme-spacing-md);
+
+            .image {
+                width: 200px !important;
+                height: 200px;
+            }
+
+            :global(.item-image-placeholder) {
+                width: 200px !important;
+                height: 200px;
+            }
+        }
+    }
 }
 
 .image-section {
diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
index 6242a69c0..88d4aa8fb 100644
--- a/src/renderer/features/shared/components/library-header.tsx
+++ b/src/renderer/features/shared/components/library-header.tsx
@@ -32,6 +32,7 @@ import { Play } from '/@/shared/types/types';
 
 interface LibraryHeaderProps {
     children?: ReactNode;
+    compact?: boolean;
     containerClassName?: string;
     imagePlaceholderUrl?: null | string;
     imageUrl?: null | string;
@@ -49,7 +50,7 @@ interface LibraryHeaderProps {
 
 export const LibraryHeader = forwardRef(
     (
-        { children, containerClassName, imageUrl, item, title }: LibraryHeaderProps,
+        { children, compact, containerClassName, imageUrl, item, title }: LibraryHeaderProps,
         ref: Ref<HTMLDivElement>,
     ) => {
         const { t } = useTranslation();
@@ -125,7 +126,14 @@ export const LibraryHeader = forwardRef(
         }, [item.explicitStatus, item.imageId, item.type]);
 
         return (
-            <div className={clsx(styles.libraryHeader, containerClassName)} ref={ref}>
+            <div
+                className={clsx(
+                    styles.libraryHeader,
+                    containerClassName,
+                    compact && styles.compact,
+                )}
+                ref={ref}
+            >
                 <div
                     className={styles.imageSection}
                     onClick={() => {