Optimize the layout of the newIssueWelcomeComment

[krassowski]

The current newIssueWelcomeComment comment is a tad long on my screen. I wonder if it would be a good idea to move the picture to the right and remove the white (empty) stripes on sides.

Current

Proposed

In addition to saving my fingers from scrolling to subsequent comments, it also makes the text a bit more prominent (one can fail to notice the text under the image in the current version).

Who would use this feature?

This is for both @jupyterlab and @jupyterhub I suppose.

(Optional): Suggest a solution

To prepare the proposed screenshot I just moved the <img> to the beginning and played with CSS:

max-width: 38%;
object-position: 50% 20%;
object-fit: cover;
float: right;
height: 235px;
padding-left: 15px;

Sadly, GitHub sanitizer does not allow custom CSS, so in the actual solution, we need to use the allowed <img> attributes:

<img src=".github/master/images/welcome.jpg" align=right width=40%>

Where the src should point to https://raw.githubusercontent.com/jupyterhub/ or https://raw.githubusercontent.com/jupyterlab/ respectively. The actual image should be modified (trimmed) beforehand too.

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[consideRatio]

I think it is a good suggestion and I see the value of saving some vertical space for readability! Thank you @krassowski for exploring this technically as well, your solution <img src="https://raw.githubusercontent.com/jupyterhub/.github/master/images/welcome.jpg" align=right width=40%> seems to work great!

@GeorgianaElena what do you think?

[GeorgianaElena]

👍 I like the suggestion too! Thanks @krassowski!

Not sure if any of you are using the GitHub mobile app or if this is even relevant, but I want to share this, because this was where I read this thread initially and was a bit confused about the image presence in @consideRatio's message :D This is how the message, with the image on the right looks like on my phone:

It doesn't seem very different from a bot's regular message, but I think it's ok if the text will come before.

[choldgraf]

I think it's a good idea!

[consideRatio]

It seems like the suggested solution is the same when using mobile :) which is fine i think

[betatim]

Georgiana can you make a version of the image with smaller white space on each side? If you post it here I can try and make a PR, or you directly make a PR to update it and I merge it :D

[GeorgianaElena]

I don't have the program I created the drawing anymore :(
So, I just cropped the image :D
Link here: https://user-images.githubusercontent.com/7579677/115555407-226a3500-a2b8-11eb-8cbd-b82b2bbb8758.jpg