Minor layout fixes depending on window size

[jm-morani]

Disable theatre mode styles for medium screen (or lower)

The theatre mode icon only shows up when window is greater than 1150px ($breakpoint-medium).
Users had to increase the window width to toggle it, then shrink the window back.
Now, the use of theatre mode styles is consistent with the display of the icon.
Moreover, those styles didn't compound well with small screen (900px or less).

Fix the width of the cover in theatre mode

The CSS "100vw" is the width of the window not reduced of the scroll bar.
Therefor, the right-hand side of the cover was hidden under the scroll bar.
As well, the slightly bigger width used to trigger a slightly bigger height.
This height is used as a the reference for the player's height.
So the extra height could lead to black margins on top and bottom of the video.
(Reproducible in theatre mode, when window width slightly more than 1150px and height big enough)
Now, I removed it, so it rather inherits "100%".

Fix oddities when screen width is exactly 1150px

According to useIsMediumScreen(), the screen is medium when width is up to 1150px.
This media query is equivalent (max-width: $breakpoint-medium).
But, (min-width: $breakpoint-medium) is a wrong opposite as it includes 1150px.
When the width is exactly at the limit, medium and large styles overlap.
(Eg. Check the width of covers in the list of the main page, when window width is 1150px)
Same problem for other $breakpoint, but I haven't fixed those.

Remove duplicate from the changelog

Question: Is it possible to lower the minWidth of the window?

I regularly use the application at width 670px (thank to a tiling window manager).
(Including this PR), the small screen mode seems fine. So, why not to make it available to all users?
(It may even possible to shrink further, but I haven't test enough to recommend that).

Other information

PR Checklist

Toggle...

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting)
• Refactoring (no functional changes)
• Documentation changes
• Other - Please describe:

Please check all that apply to this PR using "x":

• I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
• I added a line describing my change to CHANGELOG.md
• I have checked that this PR does not introduce a breaking change
• This PR introduces breaking changes and I have provided a detailed explanation below

[jessopb]

Thanks for the well thought-out PR. I will test it today.
For your question, the minimum size is set here if you would like to continue to test it. As a window tiler myself, I would support this.

lbry-desktop/electron/createWindow.js

Line 39 in 7ad66b9

const windowConfiguration = {

We're also interested in improving the header/hamburger display on smaller screens if so.
There are probably a lot of things like this in smaller windows and the general issue of breakpoint consistency you mentioned.

[jessopb]

Thanks for this @jm-morani , can we show you some appreciation?