[UI] Layout and alignment of streams in Media Info page is all over the place

[aaronrudkin]

This issue respects the following points:

• This issue is not already reported on GitHub (I've searched it).
• I agree to follow Jellyfin's Code of Conduct.
• This report addresses only a single issue; If you encounter multiple issues, kindly create separate reports for each one.

Describe the bug

I reported this on Jellyfin-Media-Player and after 9 months the issue got closed asking me to report it here:

jellyfin/jellyfin-media-player#860

This issue occurs in both the MacOS jellyfin-media-player client and the web client.

When clicking Media Info, the modal panel opens to show, err, media info. The panel's layout is frankly pretty baffling. I don't generally want to report UX / flow issues, but in this case I think it actually steps over into being a UI issue.

First, there is no standard order for info components; so a file might be listed as Subtitle, Video, Audio, Subtitle. Second, each info component appears to be layout in a flexibly wide container, which means if the "title" of the stream is long, it pushes stuff off to the left side. Scrolling through, the boxes are wildly uneven and not lined up in any particular way. Every info pane has a "copy" icon to its right which I guess copies the text of that section (not the underlying stream) -- this despite the fact that no other metadata view seems to have any capacity to copy things. Copying the top section with basic metadata copies the entire modal's worth of data instead.

Reproduction Steps

Open media info for any file

Expected/Actual behaviour

Display the file's video streams, followed by audio streams, followed by subtitle streams. Make each set of streams have its own header section. Within a section, use a fixed width grid layout for elements, 3 items wide. If it is necessary, truncate the "Title" field, which is the most likely thing to cause a stretching effect. If you must keep the copy icons on every section, change the tooltip to indicate that you are copying the metadata details (not the stream). Personally I would get rid of the copy icons and either add them to a ... menu (consistent with how stream URLs can currently be copied from the edit metadata ... menu) or have a single copy icon for the entire file. Re-evaluate which fields make sense to display for each tack.

Logs

No response

Server version

10.10.2

Web version

10.10.2

Build version

10.10.2

Platform

MacOS

Browser

N/A

Additional information

No response