Page MenuHomePhabricator

"Edit header" button overlaps actual header
Closed, InvalidPublic

Description

The "Edit header" button is absolutely positioned within the relatively-positioned div.flow-board-header-nav element. That header-nav is rendered below the actual header.

The reason the button is rendered above the header-nav is because the button uses bottom: 0. And, since the header-nav itself is often empty (zero height) that means the element is rendered above instead of the inside or below header-nav:

Screen_Shot_2014-12-13_at_04.34.59.png (1×1 px, 384 KB)

Exposed view:

Screen_Shot_2014-12-13_at_04.51.12.png (156×1 px, 41 KB)

While the immediate bug can be resolved by using top: 0 instead of bottom: 0. That would make it instead overlap the "Switch to topics view" button to the right of the "Newest topics" heading.

This button should probably not use absolute position in the first place because it causes problems like this where the parent element (header-nav) doesn't reserve enough space for its contents (edit button).

I'd recommend float: right (and its container would clear the float by, e.g. overflow: hidden, or clearfix, or clear: both as last child).

Event Timeline

Krinkle raised the priority of this task from to Needs Triage.
Krinkle updated the task description. (Show Details)
Krinkle added a project: StructuredDiscussions.
Krinkle changed Security from none to None.
Krinkle subscribed.
SBisson subscribed.

Not reproducible anymore. This code has changed a lot since this was reported.

Please reopen if I'm mistaken.