Plugin details lightbox screwing up plugins with large names in 4.0

[hardeepasrani]

I was trying the new plugin installer & found that the pop-up window is screwing plugin with largeeee names.

Example: ​https://wordpress.org/plugins/sexy-contact-form/

[hardeepasrani]

Pretty large, huh?

[tellyworth]

Crude fix - smaller max-width and overflow:auto

[michalzuber]

overflow:hidden, span with title attrib

[michalzuber]

For visual comparison I made ​http://i.imgur.com/nERqAtP.png

[melchoyce]

Can we add overflow: ellipsis to make the cutoff less awkward?

[michalzuber]

Added text-overflow: ellipsis; props melchoyce

[michalzuber]

Thanks melchoyce, awesome, didn't know that this feature exists in CSS :)

[melchoyce]

28883.4.diff​ drops the border-radius on the titles down to 3px from 8px, to better match the rest of the admin.

[ocean90]

Not cool: ​https://cloudup.com/cIonjjmkZ5n

[melchoyce]

Sorry, unsure how I messed that one up... Reuploading now.

[melchoyce]

We should also add ellipses for plugins without banner images: ​https://cloudup.com/cF7GvXWwA-9

[ocean90]

Replying to melchoyce:

Sorry, unsure how I messed that one up... Reuploading now.

I wasn't clear enough: We can't use width: 700px as it breaks on smaller screens, max-width: 100% should work. Also the close icon shouldn't overlap the title.

[michalzuber]

Added fix for mobile and without banner

[michalzuber]

Great ideas, thanks. Changed and the results:

• ​http://i.imgur.com/Q6A45td.png
• ​http://i.imgur.com/Coy3RVY.png
• ​http://i.imgur.com/ymtdQSI.png
• ​http://i.imgur.com/DYmAgEG.png

[johnbillion]

If we relatively position the header container and then give the plugin name a bottom position rather than a top, we can allow the title to correctly wrap to multiple lines. Much better than cutting off the end of the plugin name.

Patch coming up after I've done some more fiddling/testing.

[johnbillion]

28883.diff​ does as I mentioned above to achieve the following:

What it doesn't do, however, is quite get the layout correct at narrower widths. I can't get the container to respect the max-width:100% property when it's got white-space:nowrap. Any ideas anyone?

[stephdau]

Note that the layout itself is being updated to match the plugins repository's one better in #27440.
Our patches are conflicting at time of writing.

Not sure which one will get committed 1st, so I thought I'd mention it, so we don't get surprise conflicts at the last minute. Long titles handling is one of the last 3 issues remaining to deal with to close #27440.

I was going to ask you to apply that work to the common patch there, but it might not be the best idea if we have outstanding issues with both of our patches/solutions. Let's just "keep in touch". :)

[helen]

What do we need to do here? Right now it just gets chopped off.

[stephdau]

The patch needed to be refreshed, based on the changes committed in r29474.

I've looked at the gist of it, and was able to get to what I think is a decent handling in attachment:28883.7.diff​. But as you can see in the last screenshot of ​https://cloudup.com/cN4DcBMqDi5, I've noticed that our banner handling is sketchy at smaller width (but tall) because we decide to switch to the other mode based on the screen height.

attachment:28883.7-widthonly.diff​ is the same as 28883.7.diff, but by detecting small-screen mode based on screen width<771px, like the rest, not height<500px. Any narrow screen can benefit from the smaller banner. This could also be its own ticket, but I figured I'd give you the option to do either.

See ​https://cloudup.com/czeF7wzz-07

[johnbillion]

On wordpress.org, the plugin title wraps to multiple lines if it's too long, rather than truncating (​example).

This was what I was aiming for in 28883.diff​, but I couldn't get the truncation to work correctly at narrower screen sizes, which you've managed to do. I'm now taking a look at 28883.7-widthonly.diff​ to see if I can combine the two.

[stephdau]

Was decided to go with the width-detection only option in weekly chat.

attachment:28883.8.diff​ improves on 28883.7-widthonly.diff.

[shooper]

I was able to replicate the original problem using the 'Creative Contact Form - The Best WordPress Contact Form Builder' plugin.

Applied the patch and tested dialog at multiple screen sizes. Truncates properly.

[jmiloj]

I tested this functionality and also had the plugin name overflow its container.

I applied the patch, and it solved the issue.
Tested on Mac on FF 29.0.1 and Chrome on 36.0.1985.125, in multiple screen widths.

Here was a long plugin name without a banner image I also tested.
​https://wordpress.org/plugins/chicago-housing-widget-powered-by-everyblock/

[stephdau]

attachment:28883.9.diff​ is a patch refresh, as requested.

[helen]

In 29605:

Plugin details:

Prevent plugins with long names from looking bad and breaking layouts.

props stephdau. fixes #28883.