WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 weeks ago

#49828 closed defect (bug) (fixed)

Button size is too large under plugin information popup

Reported by: ibachal Owned by: whyisjake
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.3
Component: Plugins Keywords: has-screenshots has-patch
Focuses: css Cc:

Description

  1. Go to "Add Plugins" page
  2. Click on "More Details" of any plugin you want to install
  3. Check the size of "Install Now" button in plugin information popup. It doesn't match with other buttons due to extra CSS and seems out of align.

Screenshots are attached.

Attachments (10)

Screenshot 2020-04-06 at 11.57.16 AM.png (2.6 KB) - added by ibachal 4 months ago.
Button
Screenshot 2020-04-06 at 12.05.43 PM.png (8.1 KB) - added by ibachal 4 months ago.
Button out of align and too large
Screenshot 2020-04-06 at 12.07.09 PM.png (25.4 KB) - added by ibachal 4 months ago.
Due to this CSS
compare.jpg (31.7 KB) - added by ibachal 4 months ago.
Compare
49828 on 5.2.png (32.4 KB) - added by afercia 4 months ago.
Plugin details button on WordPress 5.2
49828 patched on trunk.png (52.3 KB) - added by afercia 4 months ago.
Plugin details button: footer height adjusted on current trunk
49828.diff (1.0 KB) - added by afercia 4 months ago.
49828.2.diff (1.1 KB) - added by afercia 7 weeks ago.
49828.png (207.0 KB) - added by afercia 7 weeks ago.
49828 modal height.png (162.3 KB) - added by afercia 7 weeks ago.

Download all attachments as: .zip

Change History (23)

@ibachal
4 months ago

Button out of align and too large

@ibachal
4 months ago

Due to this CSS

#1 @Otto42
4 months ago

Can you define "too large" and "out of alignment" more specifically? It looks okay to me on my screen, and my screen pretty much matches the screenshots you have. My button is red because I use a different color scheme but the positioning and size seem to be about the same.

@ibachal
4 months ago

Compare

#2 @ibachal
4 months ago

@Otto42 Please check other buttons in core, you will see the "Install Now" button in plugin information popup is larger as compare to other. See last screenshot.

#3 @Otto42
4 months ago

I see that it is larger (by about 5x10 pixels), but what I don't understand is why you consider this to be an issue. That is a completely different page with a different layout and set of styling. The button is in a different location and is a different color as well.

#4 @ibachal
4 months ago

I just looked closely and found that the popup is an iframe. Since width of this iframe is 772px and there are CSS rules for the button on viewport max-width 782px so, the button size is different. Thanks @Otto42

#5 @ibachal
4 months ago

  • Resolution set to invalid
  • Status changed from new to closed

#6 @afercia
4 months ago

  • Focuses ui administration removed
  • Milestone changed from Awaiting Review to 5.5
  • Resolution invalid deleted
  • Status changed from closed to reopened
  • Version changed from trunk to 5.3

I think the issue reported is valid, with one caveat:

The plugin details content happens to live within an iframe. The iframe has a viewport less than 782 pixels so it gets the buttons "responsive" styles.

In WordPress 5.2 the primary buttons height in the responsive view was 31 pixels + a box shadow resulting in a "visual" height of 32 pixels. The primary buttons "normal" size height was 28 + 1 instead.

Since WordPress 5.3 the button styles have changed. In the responsive view, all the buttons have now a height of 40 pixels. Thus, this button is not vertically centered any longer. Screenshots and patch incoming.

Last edited 4 months ago by afercia (previous) (diff)

@afercia
4 months ago

Plugin details button on WordPress 5.2

@afercia
4 months ago

Plugin details button: footer height adjusted on current trunk

@afercia
4 months ago

#7 @afercia
4 months ago

  • Keywords has-patch added; needs-patch removed

49828.diff increases the footer height to adjust to the button new height.

@afercia
7 weeks ago

@afercia
7 weeks ago

#8 @afercia
7 weeks ago

  • Keywords commit added

49828.png refreshes the patch. See screenshot above: before and after.

#9 @afercia
7 weeks ago

  • Keywords commit removed

#10 @afercia
7 weeks ago

Noticed one more issue. It appears this modal has always had a miscalculated height in the responsive view. See the screenshot attached below, taken on WordPress 4.7.

The modal content is "cut-off" by about 10 pixels. I think this is due to the way Thickbox calculates the iframe height and some CSS properties set on the modal. Although this issue isn't related to the button height, it would require some more investigation.

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


3 weeks ago

#12 @whyisjake
3 weeks ago

  • Owner set to whyisjake
  • Status changed from reopened to accepted

#13 @whyisjake
3 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 48503:

Plugins: Update the height of the Install Now button for new plugins.

Due to Thickbox shenanigans, the buttons height needed to be shrunk a little to center properly in the iframe.

Fixes #49828.

Props ibachal, Otto42, afercia.

Note: See TracTickets for help on using tickets.