(1) This reverts commit 8641a3ee1c.
(2) Fix floating-player misalignment due to YT badge in mobile by hiding the badge.
At first, the suggestion to truncate the left URI to keep the entire thing single-lined was implemented, but during testing, I realized that the YT badge will take up the entire width anyway (especially on other languages). The URI is more important than the badge, and truncating both of them would be ugly.
Given the preference to not have 2 lines for this, we'll just hide the badge for the mobile case.
For the Channel Page case, let's make it single-line through "4454: URL / top claims overlap" instead. We'll keep this commit/PR limited to fixing the YT badge.
## Issue
Fixes 4524 `[mobile] in channel search not available`
## Changes
There are currently 3 wunderbars: (1) header (2) channel list (3) downloaded list.
The additional `wrapperStyle` in the header made it hard to find a solution that works for all 3, so I split 2 and 3 into `wunderbar__input--inline`.
## Fixes:
4220
## Changes:
For `vjs-layout-small`, there is still space to display the said controls. This layout covers devices like Galaxy S5 up to Nexus 6P.
For layouts smaller that that (e.g. 'vjs-layout-xsmall'), they will remain hidden.
Implementation:
- The code is placed in <VideoJs> instead of <VideoViewer> as we need to control the video itself. It's more self-contained here, rather than trying to pass refs around between parent and child.
- useState cannot be used as it will cause a re-render when the hint it clicked and dismissed. The DOM is used to hide the button.
The MDE used in the "new" section has a parent width parameter to limit itself, while the MDE used in the "edit" section didn't.
Fix by limiting ".comment__body_container" to 80%, which takes into account the space taken by the author's avatar. This feels a little bit dirty since it's hard-coded. If there's a way to calculate the avatar width from here, it will be more robust.
