Add maxWidth and ellipsis to music list item name

2023-10-24 05:08:09 +08:00 · 2023-10-24 05:08:09 +08:00 · 1fec1bb2f6
commit 1fec1bb2f6
parent 49c5360680
1 changed files with 7 additions and 0 deletions
--- a/src/music.js
+++ b/src/music.js
@ -247,6 +247,7 @@ export default class MusicList {
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: '.25rem',
+                maxWidth: '100%',
            },
            children: [
                ...(item.picture ? [Img({
@ -254,6 +255,12 @@ export default class MusicList {
                    style: { width: '2em', height: '2em', borderRadius: '.25em' }
                })] : []),
                Span({
+                    style: {
+                        flex: 1,
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflowX: 'hidden',
+                    },
                    title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`,
                    textContent: `${item.name} - ${bytesToSize(item.size)}`,
                    onclick: event => {