In T214195#4893270, @Jdlrobson wrote:

Todo

Removing the tagline at the top of the page raises the question about whether the code that supports it ($wgMFSpecialPageTaglines) is needed any more as Special:MobileOptions is the only consumer.

@Jdlrobson and @alexhollender will go over T169162 and related tasks before estimation to work out this.

@alexhollender - do we want to remove it for everyone (logged-out users included)? I don't really see it adding much value currently. Was it there to distinguish between preferences on desktop?

@ovasileva thanks for the clarification — yes, we should remove it for all users.

clarifying further, all changes described here should be made for everyone (AMC and non-AMC).

Change 486402 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Adjust heading padding for special pages

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

Change 486403 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/MobileFrontend@master] Remove tagline from Special:MobileOptions page

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

@alexhollender part one of this two part two-pointer, the headings.

I felt there was already a lot of CSS rules touching this header:

"CSS tweaks that should be limited to resources/mobile.special.mobileoptions.styles/mobileoptions.less."

And instead made the changes apply to the heading on all special pages. Now that might sound like scope creep, but these are small changes (just removing some padding from the top, and adding some to the bottom) and this approach allowed me to remove more code than I added. Hurra.

I don't have this up on a staging server yet, but the gist of it looks like this (change to heading padding only):

page	current vs. new
Special:MobileSetting
Special:History
Special:MobileDiff
Special:Contributions
Special:RecentChanges
Special:Nearby	(not enabled on my local, but just image some padding below the heading)

There's obviously still a fair bit of irregularities across the special pages, but my hope this that this bit of extra bottom padding is desirable and a step towards some semblance of consistency, (and where there's too much we might be able to fix by using a tagline instead, etc.)

They both look good to me so marked WIP and +2ed. Feel free to remove WIP when Alex has signed off!

Should this be moved to *Needs Design Review* per ☝️?

@phuedx yes! meant to do that..
alrighty, and for part two of this two pointer, the text width.

I noticed T180652 being referenced in the comments and I realized OOUI doesn't afford us much flexibility when it comes to the width of the columns, (it's a 40/60 split, take it or leave it) so I decided to override that by using a flex-box layout to position the labels & inputs beside each other. While I was at it I also vertically centred the icons because they weren't very well aligned to the top anyway.

before / after	With AMC toggle	tablet size	alignment! huzza! (new on bottom)

@alexhollender do these screenshots suffice for a design review? If not I can try to put these patches up on a server somewhere.

Change 486474 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/MobileFrontend@master] Modify Special:MobileOptions layout

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

Just leaving a note to double-check the settings page altogether whenever this gets to QA

@alexhollender I've updated readers-web-staging with the following patches, there was an error checking the Minvera patch out the last time. The spacing below the title should be ok now.

Currently on staging:

1. MobileFrontend patch - removes the tagline - https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/486403/
2. MobileFrontend patch - fixes spacing between inputs and labels - https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/486403/
3. Minerva Patch - adjusts the heading-padding and settings layout - https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/486402/

https://reading-web-staging.wmflabs.org/w/index.php?title=Special:MobileOptions&returnto=Special%3AVersion&mobileaction=toggle_view_mobile

FYI you have to log in to see the AMC toggle. I can update AMC label in a followup patch (don't want to mess with the existing ones right now).

To see a special page with a tagline, I think it would be easiest to edit that specific HTML from the devtools. We still render and empty div below the heading for the tagline, so just clicking "edit as HTML" on that element should give you an idea of what it looks like.

Just spoke with @Jdrewniak on Slack. Two remaining items:

• Decrease padding on the right of the oo-ui-fieldLayout-header element
• Update title of setting to "Advanced contributions mode" (this will be done in a followup patch)

Change 486474 merged by Jdlrobson:
[mediawiki/extensions/MobileFrontend@master] Modify Special:MobileOptions layout

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

Change 486403 merged by Jdlrobson:
[mediawiki/extensions/MobileFrontend@master] Remove tagline from Special:MobileOptions page

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

Change 486402 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Adjust heading padding for special pages

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

@Jdrewniak well, somehow this thing keeps changing. Now there is extra spacing below the title (and title+tagline element). 15px in both cases.

without tagline - the tagline element is still holding space, if you remove this it's all set	with tagline - if you remove the padding on the bottom of the tagline it's all set

Change 491451 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/MobileFrontend@master] Remove special .tagline styles on mobile user page

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

Awesome, looks like we've finally got it.

	settings	settings+tagline	watchlist	contributions
iOS
Android

Change 491451 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Remove special .tagline styles on mobile user page

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

@Jdlrobson these changes should apply to all users (logged in and logged out, AMC on/off). I've updated the task description and QA instructions. Let me know if you have any concerns.

thanks @Edtadros !

@alexhollender can I get a confirmation that it's OK that:

1. the width of the text description is variable, depending on the width of the widget beside it?
2. The padding between the text and the widget is constant at 1.5em

I believe we discussed this offline, but it's better to have it on the record, since it's slightly different than the mock :)

Test Result:Production

Status: ✅ PASS
OS: iOS
Browser: Chrome browser on (iPhone XS Max)

Test Artifact(s):

Logged In with AMC off:

Step	Description	Status	Artifact
1	Access the mobile settings page by clicking the main navigation button and then "settings"	✅
2	Ensure the length of the text beside each input roughly aligns with the mockup	✅
3	Ensure the heading spacing aligns with mockup	✅

Logged In with AMC on:

Step	Description	Status	Artifact
1	Access the mobile settings page by clicking the main navigation button and then "settings"	✅
2	Ensure the length of the text beside each input roughly aligns with the mockup	✅
3	Ensure the heading spacing aligns with mockup	✅

Logged off:

Step	Description	Status	Artifact
1	Access the mobile settings page by clicking the main navigation button and then "settings"	✅
2	Ensure the length of the text beside each input roughly aligns with the mockup	✅
3	Ensure the heading spacing aligns with mockup	✅