Watermark in empty editors looks odd for different editor group sizes

[Tyriar]

VS Code version: Code - Insiders 1.24.0-insider (41a7c49, 2018-05-29T06:09:34.618Z)
OS version: Windows_NT x64 10.0.16299

---

#50458

One suggestion that could make it look better is to scale up to the maximum size much faster than is currently being done. Instead of using background-size: 15% use something more like max-width to drive the size of the image.

[Tyriar]

The other extreme 😄

[bpasero]

@Tyriar I am open for suggestions but the max-width thing does not work for me:

[Tyriar]

@bpasero the welcome page watermark never goes beyond this size:

We could do the same in empty groups and shrink if there isn't enough vertical or horizontal space accordingly.

[bpasero]

@Tyriar the background size in this case is 260px. Unfortunately it does not look like you can configure a max size for background images (unless maybe I would throw in another DIV only for the image). Currently we use 15% for the size which could be changed to a larger value.

[bpasero]

I realized that background-size: 15% only adjusts the width proportion of the background. Setting it to something like background-size: 50% 50% makes the background image adjust both in height and width depending on the container size:

I think that seems like a better solution to ensure that the background image is always centered. This approach does not allow to provide a max-width though.

[Tyriar]

@bpasero to use max-width you would probably need to put it into a container and then use background-size: 100%.

[bpasero]

@Tyriar yeah something like that. what do you think about having both a proportional width and height so that it changes in both directions?

[Tyriar]

@bpasero 👍 sizing down is better than clipping in both directions

[bpasero]

Now using a combination of max-width and background-size. The nice side effect of this change is that even for the empty case (1 group, no editors) the letterpress logo will size down when the window is small (previously it would overflow).

I ended up using 70% for background-size in the case of showing multiple empty groups (vs 100% when everything is empty).

[bpasero]

Can be verified with:

• Windows: Download
• macOS: Download

[Tyriar]

Looks great, thanks @bpasero! 😄