Plugin information modal: banner repeats when scrollable

[senff]

For scrollable modals, the bottom of the header banner has 6 pixels repeating vertically.

When the plugin information modal has a scrollbar, the (inner) width of the modal decreases a bit. The title banner, sized 772x250, will then be resized (for example to 755x244 on Chrome on Windows). Result is that the banner is not high enough to fill the header area which has a fixed height, and will repeat at the bottom (see attached).

Suggested patch gives the banner background:cover so that the image will be evenly placed/sized in the header.

[senff]

Example of banner repeating

[senff]

Suggested patch

[nacin]

cc @stephdau

[valendesigns]

I've refreshed the patch so it can be applied cleanly. As well, I was able to reproduce the bug in Opera on OSX and can confirm this does fix it.

Cheers,
Derek

[tellyworth]

Tested in Chrome on OSX - the latest patch works for me.

The bug doesn't occur normally in Yosemite because of its invisible scrollbars, but you can reproduce by changing System Prefs / General / Show Scroll Bars to Always.

[senff]

Sorry, I don't see immediate differences between my patch and the one by @valendesigns, can someone explain?

(Just for my future reference)

Tnx

[valendesigns]

@senff You are correct, there are not any real code differences between the patches, except that yours will not apply cleanly for two reasons. The first, common-rtl.css is a dynamically created file that is built during the grunt command with cssjanus and therefore should not be directly edited. The second, you did not create your patch from the project root.

[senff]

First part makes perfect sense, thanks!

Not sure about the second part though -- or better, not sure how I should have done that (a previous patch I made for another ticket I did it the same way and that was accepted). Or is that just different from one SVN tool to the other? - Using TortoiseSVN on Windows -

[valendesigns]

It may have been accepted, but they would have had to cd into the directory that the file is in to apply the patch. Which is extra work for the committers.

You will need to be in the root directory of your WordPress SVN checkout. The directory structure in that folder looks like:

/src/
/tests/
/tools/
.editorconfig
.gitignore
.jshintrc
.travis.yml
Gruntfile.js
package.json
phpunit.xml.dist
wp-cli.yml
wp-config-sample.php
wp-tests-config-sample.php

In that folder, right-click and select SVN Create Patch from the TortoiseSVN context menu.

Once the patch is created and saved, you should see the proper path at the top of the file.

Index: src/wp-admin/css/common.css
===================================================================
--- src/wp-admin/css/common.css        (revision XXXXX)
+++ src/wp-admin/css/common.css        (working copy)

Hopefully that clears it up for you.

Cheers,
Derek

[senff]

That makes perfect sense. Will do it like that next time. Thanks!

[helen]

In 31719:

Plugin details: Ensure banner image doesn't repeat.

props senff, valendesigns.
fixes #30773.