diff --git a/src/components/Article/AudioPlayer/AudioPlayer.module.scss b/src/components/Article/AudioPlayer/AudioPlayer.module.scss index 9c677393..09abe210 100644 --- a/src/components/Article/AudioPlayer/AudioPlayer.module.scss +++ b/src/components/Article/AudioPlayer/AudioPlayer.module.scss @@ -252,7 +252,6 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum @include font-size(1.6rem); overflow: hidden; - max-width: calc(50% - 16px); text-overflow: ellipsis; padding: 0; margin: 0; diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx index e0780c16..5147e282 100644 --- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx +++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx @@ -34,7 +34,12 @@ 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)` }) + const titleStyle = (mi: MediaItem) => { + let portion = 0 + if (mi.artist) portion += 5 + if (mi.title) portion += 5 + return { 'max-width': `calc(${portion}0% - 16px)` } + } return (