Help with Subtitle Editor responsiveness#1664
Conversation
We were using media queries in the css for the video controls to render a more compact view if the screen was not very wide. However, that did not work well in e.g. the subtitle view. This patch switches media queries for container queries, which are based on the size of the container instead of on the size of screen. This should lead to more consistent behaviour between the different views, mainly the subtitle view.
The "Download" etc. buttons in the subtitle editor are liable to flow out of the page. This patch should help with that by having them wrap or become smaller for smaller screen widths.
c0bd53f to
0fbe03b
Compare
|
This pull request is deployed at test.editor.opencast.org/1664/2026-01-28_11-52-24/ . |
|
This looks good to me, and I'd be willing to merge this in, but I'm not sure if what I'm seeing here is behaviour caused by this PR or not. Watch the Delete, Upload, and Download buttons: Screencast.from.2026-02-03.13-51-57.mp4There's clearly some fighting in the logic around whether to display them with text, or without. That being said, aside from semi-randomly showing text they stay where I would expect them to and do work. |
|
The behaviour around the Delete, Upload and Download buttons is caused by this PR and intentional. They now flex-wrap instead of overflowing out of the window, and the text is removed when the window width goes below a certain magic number. Nothing random about it. I think ideally, we would remove the text from the buttons when they are just about to wrap around, and then only wrap around if necessary. However, that requires far more careful javascripting than I am willing to invest here. |
Follow up on #1160. Fixes the rest of #1391 and #928.
Should help with the video controls and the buttons on the top right overflowing out of sight for smaller window widths in the subtitle editor view. They will eventually still disappear if the width gets small enough, but the subtitle editor is arguably not designed to work for such small widths anyway.
How to test this
Open the subtitle editor (and every other view that has video controls) and test out different screen sizes. (Views can be enabled in the config or via query parameter, e.g.
subtitles.show=true)