From 4cc51c3700e5f25d53d18c5089a9fc5deb93737b Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 14 Dec 2025 01:31:40 -0800
Subject: [PATCH] fix formatting in playlist duration (#1382)

---
 .../components/sidebar-playlist-list.module.css       |  4 ++++
 .../sidebar/components/sidebar-playlist-list.tsx      |  8 ++++----
 src/renderer/utils/format.tsx                         | 11 ++++++++++-
 3 files changed, 18 insertions(+), 5 deletions(-)

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
                     </Text>
                     <div className={styles.metadataGroup}>
                         <div className={styles.metadataGroupItem}>
-                            <Icon color="muted" icon="track" size="sm" />
-                            <Text isMuted size="sm">
+                            <Icon color="muted" icon="track" size="xs" />
+                            <Text isMuted size="xs">
                                 {item.songCount || 0}
                             </Text>
                         </div>
                         <div className={styles.metadataGroupItem}>
-                            <Icon color="muted" icon="duration" size="sm" />
-                            <Text isMuted size="sm">
+                            <Icon color="muted" icon="duration" size="xs" />
+                            <Text isMuted size="xs">
                                 {formatDurationStringShort(item.duration ?? 0)}
                             </Text>
                         </div>
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) =>