fix formatting in playlist duration (#1382)

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 {

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

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