[Bug]: Disable horizontal scrollbar and make the UI fit to screen in portrait mode

[bigbiggie]

Guidelines

• [X] I have encountered this bug in the latest release of FreeTube.
• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Describe the bug

On most videos the UI looks good, but when there is a large link or a large word without spaces (for example a bitcoin address) in the description, the UI of FreeTube will create horizontal scrollbars and it is not possible to watch the video anymore. See pictures .

Expected Behavior

The video player should always fit into the window.

Issue Labels

visual bug

FreeTube Version

v0.16.0 Beta

Operating System Version

Arch Linux Arm

Installation Method (If applicable)

Flathub

Last Known Working FreeTube Version (If Any)

No response

Primary API used

No response

Additional Information

No response

Nightly Build

• [ ] I have encountered this bug in the latest nightly build.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[ceeb9]

what's the aspect ratio of your device?

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

@MarmadileManteater im not able test but was this fixed by ur latest PR?

[bigbiggie]

what's the aspect ratio of your device?

It's a pinephone (5.95'', 1440x720)

@MarmadileManteater im not able test but was this fixed by ur latest PR?

It's mostly fixed. The horizontal scrollbar still appears sometimes, when reading comments (i.e. when showing replies of a comment). It doesn't seem to happen on all videos, no idea why. On the video in the second picture (v=zrProK5R7ms), this bug can be reproduced by showing the comments, viewing the replies of the pinned comment, scrolling down, and then clicking on show more replies.

[MarmadileManteater]

I've noticed that long channel names with no spaces in them tend to cause the page to overflow. They can be anywhere on the page. Sometimes, they are in the related videos section, but they aren't always. I could imagine that comment replies are probably more prone to this issue since they provide less space for the channel name to appear than top level comments.

A fix for this might be to change the word-wrap styling on channel names to break-word.

[MarmadileManteater]

Also, buttons sometimes cause the page to overflow because they don't word wrap. This isn't a problem if the locale is set to English.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.