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 (266×62 px, 8 KB)

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

image.png (500×75 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 (3,050×352 px, 141 KB)

Screenshot 2022-09-28 at 16.47.49.png (2,432×190 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 (3,566×1,890 px, 560 KB)
Monobook
Screenshot 2022-10-18 at 15.39.29.png (3,582×1,864 px, 509 KB)
Screenshot 2022-10-18 at 15.39.14.png (3,576×1,858 px, 482 KB)
Vector default
Screenshot 2022-10-18 at 15.42.35.png (3,208×1,846 px, 657 KB)
Screenshot 2022-10-18 at 15.42.24.png (3,192×1,848 px, 595 KB)
Vector legacy
Screenshot 2022-10-18 at 15.41.17.png (3,214×1,854 px, 425 KB)
Screenshot 2022-10-18 at 15.41.32.png (3,212×1,846 px, 418 KB)
MinervaNueue
Screenshot 2022-10-18 at 15.40.14.png (2,772×1,884 px, 370 KB)
Screenshot 2022-10-18 at 15.40.27.png (2,574×1,854 px, 343 KB)
ppelberg claimed this task.