WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 2 years ago

#30343 new defect (bug)

Hello Dolly borks "Upload Plugin" and "Upload Theme" on small screens.

Reported by: voldemortensen Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch has-screenshots
Focuses: ui Cc:

Description

Pretty much what the title says. On smaller screens, the "Upload Plugin" and "Upload Theme" links on their respective installation pages have a funny wrap to them. Screenshots and patch to follow.

Attachments (7)

dolly.jpg (17.9 KB) - added by voldemortensen 4 years ago.
30343.diff (384 bytes) - added by voldemortensen 4 years ago.
overlap.jpg (15.0 KB) - added by voldemortensen 4 years ago.
30343.patch (487 bytes) - added by 5um17 4 years ago.
Patch using inline-block
stillbroke.jpg (80.9 KB) - added by voldemortensen 4 years ago.
30343.2.patch (1.1 KB) - added by 5um17 2 years ago.
Patch to fix overlapping issue
1-26-2016 12-54-39 PM.png (45.8 KB) - added by 5um17 2 years ago.

Download all attachments as: .zip

Change History (13)

@voldemortensen
4 years ago

@voldemortensen
4 years ago

#1 @voldemortensen
4 years ago

Patch fixes the wrapping issue, but when it does wrap it causes an overlap. The "Upload Theme/Plugin" links overlap the "Add Themes/Plugins".

#2 @5um17
4 years ago

  • Focuses ui added
  • Keywords has-patch added

I think white-space: nowrap; is not the good solution here, making it inline-block does the job. Also if we reduce the line-height to normal it fixes the overlapping problem of Add Plugins heading. Added patch for this.

@5um17
4 years ago

Patch using inline-block

#3 follow-up: @voldemortensen
4 years ago

inline-block fixed it as well, but line-height: normal did not fix the overlapping issue for me, using Firefox 33.

#4 in reply to: ↑ 3 @5um17
4 years ago

Replying to voldemortensen:

inline-block fixed it as well, but line-height: normal did not fix the overlapping issue for me, using Firefox 33.

I've also changed the padding to 5px 15px;

#5 @chriscct7
3 years ago

  • Keywords needs-refresh added

#6 @5um17
2 years ago

  • Keywords has-screenshots added; needs-refresh removed

Broken text issue was fixed using white-space: nowrap; but still overlapping issue exist. It is actually problem because a tag is inline element with top: -3px;. Well it doesn't seems to me a good idea so I would suggest to remove top property and using inline-block with vertical alignment.

Adding patch 30343.2 for the same. I also removed top: -2px from .themes-php .wp-filter-search to make it consistence and vertically aligned with button on /wp-admin/themes.php

@5um17
2 years ago

Patch to fix overlapping issue

Note: See TracTickets for help on using tickets.