Mobile/tablet channel page & share button visual improvements

[kommunarr]

Mobile/tablet channel page & share button visual improvements

Pull Request Type

• Feature Implementation

Related issue

None

Description

Channel page changes:

1. Updates Channel page to have Channel tabs always show on tablet & mobile view, replacing the use of overflow-x: scroll
   a. This is a better user experience and more closely matches with what we do on the tabs on other pages (e.g., the Subscribe tab).
2. Updates Channel view to work at regular mobile sizes for all locales
3. Updates Channel view to work on even the smallest devices in all locales
4. Updates mobile Channel view to be more aesthetically pleasing
5. In perhaps the silliest set of events to occur, re-introduces the Fix subscribe button being clipped on Channel page (mobile/tablet view) #4057 fix which was broken by Fix buttons intersecting on Subscribed Channels tab #4058 (wherein the increased selectivity had overridden the fix)
6. Prevents channel tabs from overflowing on desktop view in some locales

Share button modal changes:

7. Updates share button to work at regular mobile and tablet sizes for all locales
8. Updates share button to work on even the smallest devices in all locales

Screenshots

Before:

6:

After:

simplescreenrecorder-2023-09-20_19.22.02.mp4

Testing

Channel page:

• Set locale to one with larger-than-English labels (e.g., Russian).
• Navigate to a given author's channel page.
• Use Chrome devtools to test different viewport widths and heights, ensuring that the Channel view doesn't break at any size.

Share button:

• Set locale to one with larger-than-English labels (e.g., Russian).
• Enter the Watch route for any video.
• Open the ft-share-button dropdown.
• Use Chrome devtools to test different viewport widths and heights, ensuring that the view doesn't break at any size.

Desktop

• OS: OpenSUSE Tumbleweed
• OS Version: 2023xxxx
• FreeTube version: 0.19.0

Additional context

Note that there are some pre-existing visual bugs with the Watch route, particularly with the open share button dropdown clipping into the side when going from dialog view -> widen to dropdown view. We can clear these up in a later PR, but I have to stop adding things to this one first.

The mobile side nav is also broken in languages where the label text overflows to >= 2 lines, and the Settings tab disappears on viewport widths below ~350px. This is also pre-existing and better saved for a later PR.

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

LGTM

[absidue]

Just pulled down these changes, looks nice on mobile but takes up a significantly larger amount of space on desktop/wider screens, than before. Not sure I'm a fan, but I didn't get round to reviewing this pull request in time, so I don't really get to comment on that anymore.

full screen screenshots
before:

after:

[kommunarr]

Erg, that was probably an unintended byproduct of resolving line number six that I somehow missed. Sorry about that, I can change that. Sorry about these mini fixes!

[absidue]

If you can fix number 6 without any visible differences to the normal layout that would be ideal :).

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

TBH i really like how that after picture looks except for the searchbar placement. If that could be on the same height of the tabs it would look pretty neat IMO

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

nvm we should fix this