diff --git a/frontend/css/main.css b/frontend/css/main.css index cd0ffb1..e0c0e0e 100644 --- a/frontend/css/main.css +++ b/frontend/css/main.css @@ -937,6 +937,7 @@ body { -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%); } .tab { white-space: nowrap; flex-shrink: 0; } + .playlist-item { flex-wrap: wrap; } /* Dashboard stats stack to single column */ .dash-stats-row { flex-direction: column; } diff --git a/frontend/js/components/toast.js b/frontend/js/components/toast.js index 7dafdc9..966f9e6 100644 --- a/frontend/js/components/toast.js +++ b/frontend/js/components/toast.js @@ -2,6 +2,8 @@ export function showToast(message, type = 'info', duration = 4000) { const container = document.getElementById('toastContainer'); const toast = document.createElement('div'); toast.className = `toast ${type}`; + toast.setAttribute('role', type === 'error' ? 'alert' : 'status'); + toast.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite'); toast.innerHTML = ` ${type === 'success' ? '' : diff --git a/frontend/js/views/playlists.js b/frontend/js/views/playlists.js index cf001a3..d4791d2 100644 --- a/frontend/js/views/playlists.js +++ b/frontend/js/views/playlists.js @@ -294,7 +294,7 @@ function renderItems(items) { } itemsEl.innerHTML = items.map((item, i) => ` -
+
${i + 1}
${item.thumbnail_path