Steps to replicate the issue (include links if applicable):
- Visit a page while logged in and using Vector-2022
What happens?:
What should have happened instead?:
Description
Description
Details
Details
Related Changes in Gerrit:
Customize query in gerrit
Related Objects
Related Objects
- Mentioned In
- T429039: [design QA] Ensure the misalignment of watchstar and save button on navigation above article has been fixed
T403272: Vector 2022 navbar icons have inconsistent hover states - Mentioned Here
- T430657: Fix vertical alignment of page toolbar items across browsers
T429039: [design QA] Ensure the misalignment of watchstar and save button on navigation above article has been fixed
T429258: Replace “tools” text button on article nav with an ellipsis icon.
T426131: Update tools belt to accommodate watch and bookmark and update page tools to only show icons at lower resolutions
Event Timeline
Comment Actions
This was caused by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1286498 for T426131, which adds a margin-top:-1px to .mw-watchlink with the comment // Improve Firefox alignment. It does indeed improve how it looks in Firefox, but alas it makes it look misaligned in all other browsers.
Comment Actions
Change #1304106 had a related patch set uploaded (by DLynch; author: DLynch):
[mediawiki/skins/Vector@master] MenuTabs: scope firefox watchlink alignment fix to only affect Firefox
Comment Actions
Change #1302970 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):
[mediawiki/skins/Vector@master] Update VectorComponentMenu to use button php and mustache template
Comment Actions
Change #1304106 merged by jenkins-bot:
[mediawiki/skins/Vector@master] MenuTabs: scope firefox watchlink alignment fix to only affect Firefox
Comment Actions
Change #1302970 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Update VectorComponentMenu to use button php and mustache template
Comment Actions
This looks good now in beta. But I think we should fix this first and see if the alignment still holds.
Comment Actions
Change #1305751 had a related patch set uploaded (by DLynch; author: DLynch):
[mediawiki/skins/Vector@master] Watch toolbar item was misaligned in non-firefox browsers again
Comment Actions
Hey @HFan-WMF, I think we should open a separate task to address the toolbar alignment issues we've been having more holistically. Right now, we're applying 1px and -1px margins in several places in the CSS code, and I'd like to see if we can find a less fragile solution. We may want to merge @DLynch's patch in the meantime as a temporary workaround (thanks David for your quick response here).
Comment Actions
@AnneT this specific issue has both times been because Firefox and other browsers are treating the vertical positioning of the codex buttons in the toolbar 1px differently, so working out the root cause would definitely be a good idea.
Comment Actions
That one also covers the bookmark button, and I don't know whether the fixes that have been applied here affect it or not, so... sort of?
Comment Actions
Change #1305751 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Watch toolbar item was misaligned in non-firefox browsers again
Comment Actions
I checked with Sneha on this before we left and she was good with where we ended up. This is being continued on T430657: Fix vertical alignment of page toolbar items across browsers to avoid it happening again.