[Feature Request]: Improve CSS in various places

### Guidelines

- [X] I have searched the issue tracker for [open](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aopen+is%3Aissue) and [closed](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+is%3Aclosed) issues that are similar to the feature request I want to file, without success.
- [X] I have searched the [documentation](https://docs.freetubeapp.io/) for information that matches the description of the feature request I want to file, without success.
- [X] This issue contains only one feature request.

### Problem Description

Unicode character has been used in testing: 𒐫

My findings (all of these findings have corresponding screenshots):

The following applies for these pages _Subscriptions, Trending, Most Popular, Playlist, History, Search and Profile page with the setting enabled **view video type = grid**_

1. Video titles are getting too long in the vertical direction.
2. Profile names are overlapping on other profile names or even video titles.
3. Profile names don't stay within the border of the grid.
4. Thumbnail is getting stretched in horizontal direction.

The following applies for the _Video player page._

5. Video title getting too long in the vertical direction.
6. Profile name getting too long.
7. Video description is getting too long.
8. Buttons under the video dont stay within the border.

The following applies for the _Comment section_ on the _Video player page._

9. Profile name getting too long.
10. Comments don't stay within the border.
11. Comments getting too long in vertical direction.
12. Allot of Unicode characters are not supported by FreeTube.

The following applies for the _Up next section_ on the _Video player page._

13. Profile name doesn't stay within the border of the grid, stretches the other titles out of border and the option button doesn't stay in place.
14. Video title gets too long.

The following applies for the _Channel page._

15. Profile name getting too long and doesn't stay within border.
16. Channel description getting too long.

The following applies for the _Playlist page._

17. Title gets too long.
18. Profile name gets too long.
19. Video section: Title gets too long.
20. Video section: Profile name gets too long.

The following applies for the _Playlist section_ on the _video page_.

21. Playlist title doesnt stay within border.
22. Profile name of list creator gets too long.
23. Thumbnails in list doesn't stay within the list.
24. Video title gets too long.
25. Profile name gets too long.

The following applies for these pages _Subscriptions, Trending, Most Popular, Playlist, History, Search and Profile page with the setting enabled **view video type = list**_

26. Video title is getting to long in horizontal direction and gets out of border.
27. Profile name is getting to long in horizontal direction and gets out of border.
28. Video description is not consistently shown on every page.

### Proposed Solution

**Some of the _'solutions'_ have corresponding screenshots**

1. Cut a title off when its too long and put three dots(...) at the end.
2. Cut profile name off when its too long and maybe put three dots(...) at the end.
3. Profile name must stay within the border and cut off if too long.
4. Stay within the borders of the grid.
5. Cut the title off then its too long.
6. Cut of the profile name when it is too long.
7. Make an preview of the description and a button to click on that says 'Show more' and when u click on it you'll see the full description.
8. Stay within the border of the section where the buttons normally are.
9. Cut the profile name off when too long.
10. Comment must stay within border and cut off if too long and put three dots(...) at the end.
11. Make a preview and a tab that says 'Read more' and when u click on it you'll see the full comment.
12. I really don't know a solution for this.
13. Stay within the border (cut the profile name off), don't stretch other titles out of the border and option button stays in place.
14. Cut of title when it gets too long.
15. Cut profile name off when too long and profile name stays within border.
16. Cut of when its too long and put three dots(...) at the end with a show more button.
17. Make the title visible in the vertical direction.
18. Make the profile name visible in vertical direction.
19. If title reaches end of border, continue the title in the line below.
20. If Profile name reaches end of border, cut profile name off.
21. If title reaches end of border, cut title off.
22. Cut the profile name off and put ... behind it.
23. Make the thumbnails stay in the list.
24. Cut a title off when its too long and put three dots(...) at the end.
25. Cut the profile name off when too long.
26. Display title properly and dont let it go out of the border.
27. Display profile name properly and dont let it go out of the border.
28. Display description everywhere.

### Alternatives Considered

**All the _'alternatives'_ have corresponding screenshots**

1. None
2. YT cuts them off when they're too long but they also implemented that when u hover on a profile name, the full profile name shows itself in a popup. However on the profile page YT just removed the profile name, because there is no need for it to be there.
3. None.
4. None.
5. None.
6. Same alternative as number 2.
7. None.
8. None.
9. Same alternative as number 2.
10. None.
11. None.
12. None.
13. Same alternative as number 2.
14. None.
15. Same alternative as number 2.
16. None.
17. None.
18. Same alternative as number 2.
19. None.
20. Same alternative as number 2.
21. None.
22. Same alternative as number 2.
23. None.
24. None.
25. Same alternative as number 2.
26. None.
27. Same alternative as number 2.
28. None.

### Issue Labels

ease of use improvement, visual improvement

### Additional Information

**Screenshots (Dark theme is FreeTube and Light theme is YouTube Solution / Alternative)**

1. https://www.youtube.com/results?search_query=%F0%92%90%AB+

2. https://www.youtube.com/results?search_query=%F0%92%90%AB+

Alternative:

3. https://www.youtube.com/results?search_query=%F0%92%90%AB+

4. Best way to find this is to search 𒐫 with filter Type: Videos enabled

5. https://youtu.be/mAMdleRNTjk

YT solution:

6. https://youtu.be/gSlhGZg4Kfc

7. https://www.youtube.com/watch?v=mAMdleRNTjk

YT solution:

8. https://youtu.be/ta67rqaSVnc

9. https://www.youtube.com/watch?v=aXqt-10pWpw

10. https://youtu.be/UAj01-6lWD8

11. https://youtu.be/UAj01-6lWD8
(Well its not the same comment but you'll get the principle)

YT solution:

12. https://youtu.be/oL59ryNVaXk

13. https://www.youtube.com/channel/UCYjRiR2FeyxpROu3laVWo_Q
(Go to his channel > watch a vid > check the up next section > if u dont see it > go back to his channel and watch a other vid > check up next section > repeat procedure untill u get the result)

14. I couldn't find an example for this so i edited this with the developer tools.

15. https://www.youtube.com/channel/UCYjRiR2FeyxpROu3laVWo_Q

16. I couldn't find an example for this so i edited this with the developer tools.

17. https://youtube.com/playlist?list=PL_7YUVmmp-LeUE2P6AbRKr4bRsr6p2ycs

https://user-images.githubusercontent.com/73130443/119913962-c0ec5480-bf4e-11eb-82da-6c56ad5106fa.mp4

YT solution:

18. https://www.youtube.com/playlist?list=PLU_lUL8sj0nuNfOcOxuPOEFCuOEYCJ4ir (See video 15, the same scrolling problem happens here too.)

19. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir

https://user-images.githubusercontent.com/73130443/119917595-66ef8d00-bf56-11eb-9e85-162b6a02d597.mp4

20. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir

https://user-images.githubusercontent.com/73130443/119917595-66ef8d00-bf56-11eb-9e85-162b6a02d597.mp4

21. https://youtube.com/playlist?list=PL_7YUVmmp-LeUE2P6AbRKr4bRsr6p2ycs (U will get to the playlist page. U need to start a video in the list.)

YT solution:

22. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir (U will get to the playlist page. U need to start a video in the list.)


23. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir (U will get to the playlist page. U need to start a video in the list.)

https://user-images.githubusercontent.com/73130443/119920980-c05aba80-bf5c-11eb-915b-9d579963ba4d.mp4

24. I couldn't find an example for this so i edited this with the developer tools.

25. I couldn't find an example for this so i edited this with the developer tools.

https://user-images.githubusercontent.com/73130443/122740070-23e1ba80-d273-11eb-9f15-a8efb0801186.mp4

26. Search for 𒐫 with this filter enabled Type=video

https://user-images.githubusercontent.com/73130443/123647522-acce9800-d817-11eb-8f6e-4dfecbc9d26c.mp4

27. Search for 𒐫 with this filter enabled Type=video

https://user-images.githubusercontent.com/73130443/123647540-b22be280-d817-11eb-90f5-1cf1729a2f08.mp4

28. Just check out the pages like in the video.

https://user-images.githubusercontent.com/73130443/123647675-d1c30b00-d817-11eb-9e4b-296749e480fc.mp4

No files or tests are named. Begin by reproducing the reported layout and Unicode cases across the listed grid and list views, video player, comments, up-next, channel, and playlist pages; the work is done only after its broad set of requested behaviors is narrowed and the affected layouts meet the agreed requirements.

Written by the indexing model from the issue text.