Page MenuHomePhabricator
Create Task
Maniphest T332315

Special:AppManagement is non-responsive to screen width
Open, LowPublicBUG REPORT
Actions

Assigned To
None
Authored By
MarcoAurelio
Mar 16 2023, 2:10 PM
Tags
Referenced Files
F36915694: Screenshot 2023-03-16 at 4.27.12 PM.png
Mar 16 2023, 11:49 PM
F36915025: T332315-apiportal-after.png
Mar 16 2023, 10:27 PM
F36915023: T332315-apiportal-before.png
Mar 16 2023, 10:27 PM
F36915011: T332315-monobook-after.png
Mar 16 2023, 10:27 PM
F36915009: T332315-monobook-before.png
Mar 16 2023, 10:27 PM
F36914656: apiportal-screenshot-default_skin.png
Mar 16 2023, 4:36 PM
F36914647: apiportal-screenshot-fix-20230316.png
Mar 16 2023, 4:32 PM
F36914402: Sin título.png
Mar 16 2023, 2:10 PM
Subscribers
Aklapper
apaskulin
MarcoAurelio

Description

Steps to replicate the issue

What happens?:

Text and boxes are non-responsive to the user's screen size-width. In my case I have to scroll right to see the complete contents of the page.

See attached picture:

Sin título.png (688×1 px, 67 KB)

What should have happened instead?:

Special page fits in the user's screen.

Software version

Other information:

  • MonoBook skin
  • Firefox Browser 111.0 (64-bit)
  • I have Enable responsive mode checked in Special:Preferences

Thank you.

Details

SubjectRepoBranchLines +/-
keyManagement: Adjust CSS to avoid table overflow in MonoBook skinmediawiki/extensions/WikimediaApiPortalOAuthmaster+10 -4
Customize query in gerrit

Related Objects

Event Timeline

MarcoAurelio created this task.Mar 16 2023, 2:10 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 16 2023, 2:10 PM
Aklapper added a comment.Mar 16 2023, 3:40 PM

How did you manage to apply a skin which is not the WikimediaAPIPortal skin and not available in the Preferences? By explicitly passing useskin=monobook ?

apaskulin added a project: API-Portal.Mar 16 2023, 3:53 PM
apaskulin subscribed.

Thanks for opening this, @MarcoAurelio.

@Aklapper, anyone with a global skin preference enabled will see that skin in the API Portal.

apaskulin triaged this task as Low priority.Mar 16 2023, 3:53 PM
apaskulin moved this task from Backlog to Tech debt on the API-Portal board.
MarcoAurelio added a comment.EditedMar 16 2023, 4:32 PM

Hello @apaskulin, thanks for your answer and your answer to @Aklapper as well. I indeed I use MonoBook as my global skin.

I've been playing around with the CSS console. Adding <div style="display: flex;"> after the <div id="api-manangement-panel"> one fixes the issue for me:

#api-management-panel > div:nth-child(1) {
  display: flex;
}

I also removed the box height, and adjusted the padding and margins of it so it's not that big:

.apiportal-key-overview-item {
    display:table;
    border:1px solid #c8ccd1;
    padding:15px;
    width:100%;
    margin:10px auto 10px auto;
}

It now looks okay to me in MonoBook;

apiportal-screenshot-fix-20230316.png (855×1 px, 104 KB)

And okay too WikimediaAPIPortal skin:

apiportal-screenshot-default_skin.png (1×1 px, 138 KB)

If you think that's okay and works for you / your team, I can try to patch the keyManagement.less file later today.

Thank you.

apaskulin added a comment.Mar 16 2023, 5:11 PM

Thanks, @MarcoAurelio! That looks great

MarcoAurelio added a comment.Mar 16 2023, 5:26 PM
In T332315#8703187, @apaskulin wrote:

Thanks, @MarcoAurelio! That looks great

Thank you. I'll upload a patch later today.

MarcoAurelio added a comment.EditedMar 16 2023, 10:27 PM

I did further tests and changed a bit the code above:

Proposed fix:

#api-management-panel {
	>div {
		display: table;
		margin-bottom: 10px;
	}
}
.apiportal-key-overview-item {
	display: inline-table;
	border: 1px solid #c8ccd1;
	padding: 15px;
	width: 100%;
	margin: 5px auto 5px auto;
	height: auto;

Comparison with MonoBook skin

BeforeAfter
T332315-monobook-before.png (1×1 px, 147 KB)
T332315-monobook-after.png (855×1 px, 131 KB)

Comparison with WikimediaAPIPortal skin (default for the site)

BeforeAfter
T332315-apiportal-before.png (1×1 px, 174 KB)
T332315-apiportal-after.png (1×1 px, 165 KB)

How I tested this

In https://api.wikimedia.org/wiki/Special:AppManagement, open your browser console and load:

mw.loader.load("https://meta.wikimedia.org/w/index.php?title=User:MarcoAurelio/test.css&oldid=24728319&action=raw&ctype=text/css", "text/css");

to see the results (it is the whole LESS file with the proposed modifications converted to CSS).

Patch will follow.

gerritbot added a comment.Mar 16 2023, 10:28 PM

Change 900466 had a related patch set uploaded (by MarcoAurelio; author: MarcoAurelio):

[mediawiki/extensions/WikimediaApiPortalOAuth@master] keyManagement: Adjust CSS to avoid table overflow in MonoBook skin

https://gerrit.wikimedia.org/r/900466

gerritbot added a project: Patch-For-Review.Mar 16 2023, 10:28 PM
apaskulin added a comment.Mar 16 2023, 11:49 PM

Thanks for the patch, @MarcoAurelio! I was able to reproduce the issue locally using MonoBook. I'm seeing that your patch fixes the issue at larger screen widths, but I'm still seeing the issue at around 1450px and narrower (although because you've reduced the padding at least the whole text is visible now).

Screenshot 2023-03-16 at 4.27.12 PM.png (433×1 px, 117 KB)

I played around with this for a bit, but I'm not sure how to fix it completely. Your patch is definitely an improvement over the current state, so I'm going to go ahead and merge it.

gerritbot added a comment.Mar 16 2023, 11:52 PM

Change 900466 merged by jenkins-bot:

[mediawiki/extensions/WikimediaApiPortalOAuth@master] keyManagement: Adjust CSS to avoid table overflow in MonoBook skin

https://gerrit.wikimedia.org/r/900466

MarcoAurelio mentioned this in rEWAP43d58a797a2c: keyManagement: Adjust CSS to avoid table overflow in MonoBook skin.Mar 16 2023, 11:54 PM
ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.1; 2023-03-20).Mar 17 2023, 12:00 AM
Maintenance_bot removed a project: Patch-For-Review.Mar 17 2023, 12:10 AM
MarcoAurelio added a project: CSS.Mar 17 2023, 12:23 AM
In T332315#8704154, @apaskulin wrote:

Thanks for the patch, @MarcoAurelio! I was able to reproduce the issue locally using MonoBook. I'm seeing that your patch fixes the issue at larger screen widths, but I'm still seeing the issue at around 1450px and narrower (although because you've reduced the padding at least the whole text is visible now).

Thank you for your quick review. I am not sure how to address that either. My browser's console inspector warned me (before and after the patch) that <div id="#globalWrapper> overflows, but it's not clear to me if that's what is causing this. Similarly, the <html class="client-js ve-not-available" dir="ltr" lang="en"> is tagged as scroll. Again, not sure if that is the cause.

VirginiaPoundstone added a project: API Platform.Mar 20 2023, 6:11 PM
JArguello-WMF removed a project: API Platform.Apr 18 2023, 3:55 PM
Izno moved this task from Backlog to Change CSS on the CSS board.Feb 1 2024, 2:48 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL