diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
index 4102678e..e0780c16 100644
--- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
+++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
@@ -34,7 +34,7 @@ export const PlayerPlaylist = (props: Props) => {
   const handleMediaItemFieldChange = (field: keyof MediaItem, value: string) => {
     props.onMediaItemFieldChange(activeEditIndex(), field, value)
   }
-
+  const titleStyle = (mi: MediaItem) => ({ 'max-width': `calc(${mi.title ? 5 : 10}0% - 16px)` })
   return (
     <ul class={styles.playlist}>
       <For each={props.media}>
@@ -54,9 +54,13 @@ export const PlayerPlaylist = (props: Props) => {
                   when={activeEditIndex() === index() && props.editorMode}
                   fallback={
                     <>
-                      <div class={styles.title}>{mi.title || index()}</div>
+                      <div class={styles.title} style={titleStyle(mi)}>
+                        {mi.title || index()}
+                      </div>
                       <Show when={mi.artist}>
-                        <div class={styles.artist}>{mi.artist}</div>
+                        <div class={styles.artist} style={titleStyle(mi)}>
+                          {mi.artist}
+                        </div>
                       </Show>
                     </>
                   }