Make layout full-width

[kommunarr]

Make layout full-width

Pull Request Type

• Feature Implementation

Related issue

closes #5007
closes #5296

Description

Co-authored-by: @pkrasicki
(reusing some of the work from #4379)

Summary:

• Makes layout full-width, ignoring only the Settings page
• Limits grid view number of columns to 5 (technically was already an encounterable UX issue, but with this change, it would otherwise have been problematic for a greater percentage of devices)
• Adjusts playlist page styling to avoid breaking regardless of viewport width, grid or list view, or length of playlist title / description

Note: will have to revalidate the Settings page if #5029 is merged first

Screenshots

List view, large screen:

Grid view, large screen:

Grid view, normal screen:

Testing

• Test any grid view is limited to 5 columns at large enough viewport widths (>= 1475px wide)
• (REG) Test different types of page routes appear normal on mobile & desktop view
• (REG) Test that settings page is unchanged
• Test playlist page A) grid / B) list view responsive design from I) mobile to II) desktop viewport sizes with i) overly long and ii) regular length playlist descriptions and titles

Desktop

• OS: OpenSUSE
• OS Version: TW

Additional context

We have so many different card classes and styling rules throughout the app, mostly just to set margin-inline: auto and margin-block: 0 60px or margin-block: 0 15px. This is a potential future cleanup opportunity (i.e., including these into the default styling of the ft-card component, or setting a theme variable based on which version we want to invoke).

[PikachuEXE]

With 2K monitor I think limiting no. of columns to a fixed value on a wide screen makes things appearing too large

Original size is 262px and now it's doubled
I don't even have a 4K monitor yet to test this fully

From #5007

the current padding limits the number of videos that can be displayed in favour of empty space, particularly on small screens or at higher zoom levels.

I suspect limiting the no. of columns is making this worse?

[kommunarr]

With 2K monitor I think limiting no. of columns to a fixed value on a wide screen makes things appearing too large

Is the suggestion to set it to 6? This default was inspired from Piped, which uses 5. Invidious uses 4. YT uses 6, albeit with a secondary rule of capping the video thumbnail width at 500px, which is only reached on viewports greater than 3200px in width.

I suspect limiting the no. of columns is making this worse?

Worse how? This behavior was specifically requested by a teammate, who said that they did not like this original feature suggestion because it did not have this behavior implemented. Using larger visual real estate to fit in an arbitrarily large number of columns of videos is a worse and more overwhelming UX.

[PikachuEXE]

the current padding limits the number of videos that can be displayed

This PR reduces the limit on the number of videos that can be displayed

At least I disagree this closes #5007, whether piped design should adopted is another thing

[kommunarr]

I respect your opinion on a lot of things, Pika, but this is the behavior of every major video app, not just Piped. I'm open to leaving that part of the PR into a separate one if it's requested, but I'm only bundling it in here directly because a teammate explicitly communicated to me that the absence of that feature was what made the previous version of the full-width layout PR an undesirable user experience. I'll check with the issue author on whether they think it resolves the issue on paper, but ultimately, I care about improving the UX more than anything else.

[kommunarr]

Hi @deepspaceaxolotl, does this PR adequately address your original issue? The main point of contention is whether it meets your intended definition if it also caps the max number of grid columns to 5 at large viewport sizes. This is behavior adopted from other major video apps to prevent an overload of information:

This default was inspired from Piped, which uses 5. Invidious uses 4. YT uses 6, albeit with a secondary rule of capping the video thumbnail width at 500px, which is only reached on viewports greater than 3200px in width.

[deepspaceaxolotl]

5 columns should be enough for most screens! My main concern was getting to 4-5 columns, so this should work well, thank you everyone!

[PikachuEXE]

I am fine with #5007 as the issue opener agrees
Now the only point left is using 4/5/6 columns...

[kommunarr]

How about 6 columns max after a 2000px breakpoint? This is roughly what YT does (I say "roughly" because oddly enough, I can't seem to get a consistent value at which it occurs with however they've implemented it)

[kommunarr]

Updated with the above change, as well as adopting behavior inspired from YT's, where the max card width is now 2800px. Below are screenshots of the app at a simulated 4096px width:

[kommunarr]

I also have a fix for #5296 included in a commit built off this PR (5a86911), but I can save that for a separate PR if desired. I think it would probably be wise to include it, just to minimize unique instances of the team having to test card sizing stuff, but up to us.

[efb4f5ff-1298-471a-8973-3d47447115dc]

I cant make it out from the screenshots but does this fix #4535 ?

[kommunarr]

No, it does not

[PikachuEXE]

Pending reviews from others especially on mobile side

[pkrasicki]

I should have included this in my design. I missed this issue, because I don't have a big enough screen. This looks good, but in list view, the "More Options" menu button should be located right where video description ends just like on YouTube. Currently it's a big distance to travel with the mouse. So I guess the description's width should be limited.

[pkrasicki]

But when I go to YouTube's grid view at 4096px it looks different:

Their grid view is the same as in Piped and Odysee, except it doesn't stretch after 4k 3k.

Edit: Never mind. It looks like you replicated their grid view perfectly. I was just confused.

[kommunarr]

But when I go to YouTube's grid view at 4096px it looks different:

Their grid view is the same as in Piped and Odysee, except it doesn't stretch after 4k.

Could you contrast the current state of the PR versus what you're showing? I can't tell a substantive difference:

[pkrasicki]

Yes, sorry, I made a mistake. The grid view is perfect.

[kommunarr]

Updated now with a 10 line change (after hours of pain):

[pkrasicki]

Done. The right panel should be fixed now too.

[pkrasicki]

I tested YouTube a little bit and wrote down what they do in case you prefer to copy their behaviour (kinda like the previous solution did) instead of having these scrollbars.

YouTube:

• never shows more than 2 lines of text (not even on desktop it seems), here is what they do to achieve this:

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

• if text is bigger than that, it gets cut off and ellipsis is shown
• there is no way to view the full playlist title (in this view at least)
• playlist description is clickable - on click a popup displaying all of the text is shown
• when description is too big, there is also a "more" button to indicate that it can be clicked to read more text
• thumbnail is displayed on all resolutions

A compromise could be to cut off playlist title (maybe show the full title on hover at least? won't work for mobile users, but it's something), but have a scrollbar for the description just like we do for video description on watch-video page.

---

I suspect that it might be possible to get rid of the third scrollbar (for the panel itself) by rearranging things in the template and changing some styles.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[efb4f5ff-1298-471a-8973-3d47447115dc]

@kommunarr @pkrasicki are there still things that need to be done?

[pkrasicki]

@efb4f5ff-1298-471a-8973-3d47447115dc We only need approval/feedback from the team. When we fix merge conflicts it will be ready to merge.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Conflicts have to be resolved first and merging with dev branch before we can give it some proper feedback. Some pages have been changed and that is not clear how those pages are affected by this (e.g. settings page)

[pkrasicki]

@efb4f5ff-1298-471a-8973-3d47447115dc Done. Please remove the WIP label. The settings page continues to work fine for me (the new settings were already implemented when I worked on those fixes).

[efb4f5ff-1298-471a-8973-3d47447115dc]

The conflicts arent resolved?

[efb4f5ff-1298-471a-8973-3d47447115dc]

Please revert the latest commit

[pkrasicki]

They were resolved for me locally, so I'm not sure what's going on. Trending.css was the only file I had to edit. I reverted the commit now.

Edit: fixed it now, I must have done something wrong last time.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Button placement is off

VirtualBoxVM_kNdc0VV0vO.mp4

[pkrasicki]

Fixed. But I'm giving up on making that work with very long channel names.

[efb4f5ff-1298-471a-8973-3d47447115dc]

To me this underlining looks gigantic now. Maybe we should do the same underlining as the subscription page tabs?

In List mode it all looks centered now but i expected it to be at the left side like so how it currently is being displayed. Maybe it being centered is a good thing? idk tbh

VirtualBoxVM_xLWSVP2tSj.mp4

[pkrasicki]

Tabs should certainly look the same on every page. The tabs on Trending page even have a different font size now (also they're not responsive). I don't understand how those things keep happening.

I think the underline should be the same as on the Subscriptions page. I would also consider shrinking them, so that people can switch between them quicker and without having to move their mouse so much. Also change the inactive tab's text color to make it more visible. But that's for a different discussion/PR.

As for the centered list that was @kommunarr's decision. I think it looks a little weird, especially on the Trending page with its full width tabs. But a non centered one would look a little weird too. So I guess list view is just a weird thing in general. YouTube has both, so you can see for yourself:

And Odysee's list view for comparison:

[pkrasicki]

I found one issue. On channel page, the two panels are not aligned. This doesn't happen on dev branch.