handle text overflow on sidebar playlist duration

src/renderer/features/sidebar/components/sidebar-playlist-list.module.css

@@ -59,17 +59,43 @@
     gap: var(--theme-spacing-md);
     align-items: center;
     min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .metadata-group-item {
     display: flex;
-    flex-shrink: 0;
+    flex-shrink: 1;
     flex-wrap: nowrap;
     gap: var(--theme-spacing-xs);
     align-items: center;
+    min-width: 0;
+    overflow: hidden;
     white-space: nowrap;
 }
 
+.metadata-group-item-no-shrink {
+    flex-shrink: 0;
+}
+
+.metadata-group-item > * {
+    flex-shrink: 0;
+}
+
+.metadata-group-item > *:last-child {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.metadata-group-item-no-shrink > *:last-child {
+    flex-shrink: 0;
+    overflow: visible;
+    text-overflow: clip;
+}
+
 .name {
     overflow: hidden;
     text-overflow: ellipsis;

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -185,7 +185,12 @@ const PlaylistRowButton = memo(({ item, name, onContextMenu, to }: PlaylistRowBu
                         {name}
                     </Text>
                     <div className={styles.metadataGroup}>
-                        <div className={styles.metadataGroupItem}>
+                        <div
+                            className={clsx(
+                                styles.metadataGroupItem,
+                                styles.metadataGroupItemNoShrink,
+                            )}
+                        >
                             <Icon color="muted" icon="itemSong" size="sm" />
                             <Text isMuted size="sm">
                                 {item.songCount || 0}