diff --git a/public/live.css b/public/live.css index 126950b1..7cab3310 100644 --- a/public/live.css +++ b/public/live.css @@ -597,10 +597,11 @@ /* Mobile VCR */ @media (max-width: 600px) { - .vcr-bar { padding: 4px 8px; } - .vcr-controls { gap: 4px; } - .vcr-btn { padding: 3px 6px; font-size: 0.7rem; } - .vcr-scope-btn { font-size: 0.6rem; padding: 1px 4px; } + .vcr-bar { padding: 4px 8px; flex-wrap: wrap; } + .vcr-controls { gap: 4px; flex-wrap: wrap; width: 100%; justify-content: center; } + .vcr-timeline-wrap { width: 100%; } + .vcr-btn { padding: 10px 14px; font-size: 0.8rem; min-height: 44px; min-width: 44px; } + .vcr-scope-btn { font-size: 0.75rem; padding: 10px 12px; min-height: 44px; min-width: 44px; } } /* Timeline time tooltip */ diff --git a/public/live.js b/public/live.js index c4293a76..07c7c1e8 100644 --- a/public/live.js +++ b/public/live.js @@ -269,6 +269,7 @@ function drawLcdText(text, color) { const canvas = document.getElementById('vcrLcdCanvas'); if (!canvas) return; + canvas.setAttribute('aria-label', 'VCR time: ' + text); const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; const cw = canvas.offsetWidth, ch = canvas.offsetHeight; @@ -585,7 +586,7 @@