Fix commit description overflowing with 3 lines when it shouldn't

[HeCorr]

Description

If the commit description has exactly 3 lines, it is detected as being overflown when it shouldn't be, and clicking the Expand button doesn't do anything.

This PR improves the CSS code which not only fixes the issue described above but also makes it easy to change the maximum amount of lines shown in the future (as demonstrated in the second video).

This was only tested on Windows with DevTools because I don't have different systems to test this on and don't have an Electron environment set up on my machine.

Thanks to @sergiou87 for the CSS code.

Videos

Before

2022-07-02.21-21-43.mp4

After

2022-07-02.21-21-07.mp4

Release notes

Notes: Fixed commit description with 3 lines overflowing when it shouldn't

[tidy-dev]

@HeCorr Thank you for wanting to improve GitHub Desktop! However, this is actually by design. The idea behind it is is that in the case where the description is long enough to overflow (3+ lines), we show a hint of the next line to indicate that there is more to see. I understand where this feels weird for the 3 line case, but there needs to be cut off somewhere.

One could argue that we only do this on the 3rd line when there are 4+ lines, but that would require a different approach to the issue (likely refactoring the way this works to use js to calculate overflow as opposed to css).

[HeCorr]

I think you misunderstood the issue here. There were only 3 lines there, there's nothing else to Expand to, so it doesn't make sense to click Expand just to reveal nothing. It's just visually distracting when you only have three lines.

This fix will still show the Expand button when there are more than 3 lines, it didn't remove it.

I do understand this is a temporary solution, but is a solution nonetheless. I rather have it fixed with CSS now because who knows when someone will get to refactor this.

Could you please re-evaluate your decision? If not I would like a second opinion from a different maintainer.

[HeCorr]

@tidy-dev

[tidy-dev]

I do understand this is a temporary solution, but is a solution nonetheless. I rather have it fixed with CSS now because who knows when someone will get to refactor this.

I suppose that was my point, we would rather accept a full solution than a partial one. :)

If not I would like a second opinion from a different maintainer.

The GitHub Desktop maintainers are a team. Thus, requesting another maintainer likely won't get you very far. :) If you would like to continue contributing, I would suggest you read up on respectful disagreement in our Code of Conduct.

However, I decided to talk with the team about the issue and it has been discussed in the past. Here #5700 and then addressed here #5711

Looking at #5711, it should work as I described where 3 lines does not show expand but 4 lines not only show the expand, but also show shadow on 3 lines and expand. (the part I was concerned about)

Going to reopen your PR and test it out and see if the shadow shows as expected at 4 lines. If so, we will see about putting it through. :)

[HeCorr]

I suppose that was my point, we would rather accept a full solution than a partial one. :)

I respect that, but unfortunately I'm not able to provide a full solution, hence this simple 1 pixel change which should last for another year or two as long as the UI layout doesn't change much.

If you would like to continue contributing, I would suggest you read up on respectful disagreement in our Code of Conduct.

I personally don't believe I was disrespectful in any way. I just politely asked for a second opinion if possible.
Due to the simplicity of the fix, it didn't make sense to me that it got rejected so quickly.
But if you felt offended, my apologies.

(...) it should work as I described where 3 lines does not show expand but 4 lines not only show the expand, but also show shadow on 3 lines and expand.

That's exactly what this fix accomplishes.
I thought I had mentioned this on my original message but if you read my commit you can see that it mentions the original fix by @aryyya (which was bumping a CSS value, exactly like mine).
The layout has certainly changed since 2018 and the old fix stopped working. That's all this is, a simple "re-fix" if you will.

Going to reopen your PR

Thank you very much!

[HeCorr]

My sincere apologies for not working on this when I said I was going to.
I've been very busy lately but I'll finish it right now.

[HeCorr]

@tidy-dev I've implemented a more permanent solution and updated the PR's description, please take a look at it when you can!

[HeCorr]

@sergiou87 could you please review the latest changes?

[tidy-dev]

✨ This works great! Thank you for your patience.

[sergiou87]

Looks great!! Thank you 🤩

[HeCorr]

Thank you very much!