Page MenuHomePhabricator

DI sticky header causing issue with Flow sub-header
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue:

What happens?:

  • The tocWidget jumps to overlay the "Start a new topic" text-area box.

What should have happened instead?:

  • Nothing

Possible clue?
When I scroll, this line appears (seen in Web Inspector) within the <div class="oo-ui-widget oo-ui-widget-enabled flow-ui-navigationWidget mw-sticky-header-element">

.client-js .vector-sticky-header-visible .mw-sticky-header-element {
  top: 3.125rem !important;
}

Video

Event Timeline

Change 822333 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/Flow@master] mw.flow.ui.NavigationWidget: apply class mw-sticky-header-element only when tocWidget is affixed

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

From this task's description of What should have happened? Nothing I understand the tocWidget does not not need to stick until any topic "is in view". As mentioned in T311092#8078636 the tocWidget stickiness is implemented with postion: fixed and toggling the .flow-ui-navigationWidget-affixed class. I think we don't need to alter the position: relative from .flow-ui-navigationWidget to position: sticky to fix the overlap here although it would also work. Would it be more correct to use position: sticky in .flow-ui-navigationWidget? @Jdlrobson

Change 822333 merged by jenkins-bot:

[mediawiki/extensions/Flow@master] mw.flow.ui.NavigationWidget: apply class mw-sticky-header-element only when tocWidget is affixed

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

Checked in betalabs - the issue is fixed; checked in testwiki wmf.26 (and on the page: https://www.mediawiki.org/wiki/User_talk:Quiddity) - all works as expected.