Edition tool takes too much space on large screens

[SalomonBrys]

~~This bug started at 0.5.3~~

As you can see in the screenshot, on large (2K) monitors, the code medium UI now takes more space than it needs, shrinking unnecessarily the Medium blog editor.

Clicking anywhere in the gray space around the code editor closes the editor.

[Maluen]

That part of the code wasn't changed in v0.5.3, the feature was requested in https://github.com/Maluen/code-medium/issues/2 and implemented in https://github.com/Maluen/code-medium/commit/60835352f813e1e741a665e0b6a786678ea210d4#diff-84b7cee7bfd122a4066f77c9922422bde6e5e0c4e25aa5060d42a7f812299896R44-R62

It leaves 740px for the medium UI and the rest is used by code-medium.

Maybe we could set a max-height or different breakpoints. Do you have any suggestion? @SalomonBrys

[SalomonBrys]

My bad. I probably never noticed it because I usually take time to write when I'm on the move, so not on a large screen.

I think these big gray spaces are useless, so ideally, I'd like the code-medium popup to take its regular 900px and leave the rest to Medium.

In essence:

if (windowWidth < 1640) {
    mediumWidth = 740;
    codeWidth = windowWidth - 740;
} else {
    codeWidth = 900;
    mediumWidth = windowWidth - 900
}

What I am requesting is clearly a feature, not a bug, so feel free to tell me that it's a bad idea and close it without fixing it ;) Your tool is still a must have for me!

[Maluen]

The medium UI has a max-width of 740px regardless of screen size. You can check the .postArticle-content .sectionLayout--insetColumn element to see

Which is why code-medium is using "100% - 740px". In the end it is a matter of "grey" bars of code-medium VS "white bars" of the medium UI. FYI you can click on the grey bars to close the code-medium UI, instead of having to click on the small X on top right.

Even though I agree that in large screens the very big grey bars are ugly and not really useful.

That being said, I can change the CSS to increase the max-width of the medium-ui, but it will stretch the content, meaning for example a paragraph that wraps 3 lines will be stretched into a single line, which in a way will break the "preview" of how the finished published article will look like.