Page MenuHomePhabricator

"Return to reply" button appears under vector 2022 sticky header
Closed, ResolvedPublic

Description

At the bottom of the page it appears fine:

image.png (62×266 px, 8 KB)

At the top of the page it is under the sticky header (barely visible):

image.png (75×500 px, 14 KB)

Event Timeline

Change 834641 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] Move "Return to comment" below sticky header when present

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

Change 834641 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Move "Return to comment" below sticky header when present

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

EAkinloose subscribed.

✅ "Return to reply" button appears below vector 2022 sticky header

Screenshot 2022-09-28 at 16.47.15.png (352×3 px, 141 KB)

Screenshot 2022-09-28 at 16.47.49.png (190×2 px, 57 KB)

It’s also (and still) broken on Timeless, except that it’s not visible at all, since the Timeless sticky header isn’t transparent. Couldn’t we have a more general solution, which fixes Vector and Timeless as well as any third-party skins that have sticky headers?

It’s also (and still) broken on Timeless, except that it’s not visible at all, since the Timeless sticky header isn’t transparent. Couldn’t we have a more general solution, which fixes Vector and Timeless as well as any third-party skins that have sticky headers?

This occurerd to me as well:

In JS would could provide an API for defining the viewport dimensions (similar to what we have in ve.ui.Surface#getViewportDimensions which accounts for the floating toolbar).

For CSS users using position:fixed, this is always relative to the whole page viewport, so you could define some LESS variables. They would need to be defined by the skin, but available globally (e.g. to core and extensions).
It would also not account for dynamic elements which may or may not be present, and wouldn't be supported by gadgets.

A better approach might be to define a class framework, e.g. .skin-viewport-top { top: 0 } which the sticky header could override to .skin-viewport-top { top: 50px; }.

It’s also (and still) broken on Timeless, except that it’s not visible at all, since the Timeless sticky header isn’t transparent. Couldn’t we have a more general solution, which fixes Vector and Timeless as well as any third-party skins that have sticky headers?

Filed as T319023

Jdlrobson subscribed.

I left a comment on T319023. I don't recommend the solution you've gone with as it will break within the next month when web team works on T314328. Happy to help with any issues you have with the alternative solution I've proposed there.

Change 843498 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] Follow-up I394f02912: Use existing class API to move button away from sticky header

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

Change 843498 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Follow-up I394f02912: Use existing class API to move button away from sticky header

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

SkinTopBottom
TimelessT319023
Screenshot 2022-10-18 at 15.37.40.png (1×3 px, 560 KB)
Monobook
Screenshot 2022-10-18 at 15.39.29.png (1×3 px, 509 KB)
Screenshot 2022-10-18 at 15.39.14.png (1×3 px, 482 KB)
Vector default
Screenshot 2022-10-18 at 15.42.35.png (1×3 px, 657 KB)
Screenshot 2022-10-18 at 15.42.24.png (1×3 px, 595 KB)
Vector legacy
Screenshot 2022-10-18 at 15.41.17.png (1×3 px, 425 KB)
Screenshot 2022-10-18 at 15.41.32.png (1×3 px, 418 KB)
MinervaNueue
Screenshot 2022-10-18 at 15.40.14.png (1×2 px, 370 KB)
Screenshot 2022-10-18 at 15.40.27.png (1×2 px, 343 KB)
ppelberg claimed this task.