mail.google.com - design is broken

[reinhart1010]

URL: https://mail.google.com/mail/u/0/#inbox/FMfcgxmZVXvsJqzZdLvFmZnrwZLFkjnB

Browser / Version: Firefox 59.0
Operating System: Ubuntu
Tested Another Browser: No

Problem type: Design is broken
Description: Scrollbar appears on Google Calendar appointment widget
Steps to Reproduce:
In Google Calendar (calendar.google.com):

1. Open Google Calendar using the same Gmail account.
2. Add a new appointment with long title, approx. in 50 characters.
3. Save appointment

In Gmail (mail.google.com):

1. Log in to Gmail.
2. Switch to the new layout/version of Gmail.
3. Open the Google Calendar sidebar on the right page
4. Click on the appointment created on the previous steps
5. Observe the presence of scrollbar.
   

From webcompat.com with ❤️

[reinhart1010]

This gets a different rendering in Epiphany 605.1.15/Safari 11.
A tooltip text is shown when hovering the appointment title.

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.
The scroll bar is not available on Chrome or Epiphany browsers, where the tooltip is displayed with the full title.

Tested with:
Browser / Version: Firefox Nightly 62.0a1 (2018-05-07)
Operating System: Linux Ubuntu 16.04

Moving to Needsdiagnosis for further investigation.

[karlcow]

@softvision-oana-arbuzov if you inspect this title on the right side. Do you get a -webkit-line-clamp in the CSS properties?

It looks like it from the screenshot.

If yes that will make it a duplicate of
https://bugzilla.mozilla.org/show_bug.cgi?id=866102

[softvision-oana-arbuzov]

Yes @karlcow, I did find it in Chrome

.xQ6AJ {
    font-family: 'Google Sans',Arial,sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .01rem;
    line-height: 1.375rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 1.25rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

but not on Firefox for the same .xQ6AJ class

.xQ6AJ {
    font-family: 'Google Sans',Arial,sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .01rem;
    line-height: 1.375rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 1.25rem;
    overflow-x: hidden;
    overflow-y: auto;
}

[reinhart1010]

Fine. Let's close this as duplicate.

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=866102

[karlcow]

ah. you didn't find it on Firefox, which mean they didn't send it for Firefox user agent, and the design just break for long titles. I guess they would use line-clamp if Firefox was supporting it. So I guess all the same.