diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.module.css b/src/renderer/features/sidebar/components/sidebar-playlist-list.module.css index f67862702..bd9f2f160 100644 --- a/src/renderer/features/sidebar/components/sidebar-playlist-list.module.css +++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.module.css @@ -58,12 +58,16 @@ flex-wrap: nowrap; gap: var(--theme-spacing-md); align-items: center; + min-width: 0; } .metadata-group-item { display: flex; + flex-shrink: 0; + flex-wrap: nowrap; gap: var(--theme-spacing-xs); align-items: center; + white-space: nowrap; } .name { diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx index 07274a8f6..2925a7f87 100644 --- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx +++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx @@ -184,14 +184,14 @@ const PlaylistRowButton = memo(({ item, name, onContextMenu, to }: PlaylistRowBu
- - + + {item.songCount || 0}
- - + + {formatDurationStringShort(item.duration ?? 0)}
diff --git a/src/renderer/utils/format.tsx b/src/renderer/utils/format.tsx index 47749ca69..135412360 100644 --- a/src/renderer/utils/format.tsx +++ b/src/renderer/utils/format.tsx @@ -57,7 +57,16 @@ export const formatDurationString = (duration: number) => { export const formatDurationStringShort = (duration: number) => { const rawDuration = formatDuration(duration).split(':'); - return `${rawDuration[0]}h ${rawDuration[1]}m`; + + if (rawDuration.length === 2) { + // Less than 1 hour: show "0h" and minutes + return `0h ${rawDuration[0]}m`; + } else if (rawDuration.length >= 3) { + // 1 hour or more: show hours and minutes + return `${rawDuration[0]}h ${rawDuration[1]}m`; + } + + return '0h 0m'; }; export const formatRating = (item: Album | AlbumArtist | Song) =>