Page MenuHomePhabricator

The "IABot Management Interface" header obscures parts of the page on a narrower browser width
Open, NormalPublic

Description

Not applicable to a specific wiki – this occurred on the tools.wmflabs.org/iabot website after signing up for an account and then adding an email. A notice popped up, telling me:

Success: Your settings have been successfully saved, but your email needs to be confirmed before it can be used. Please check your email for more information. Please also trust the sender, IABot Mailer <do_not_reply@internetarchivebot.tools.wmflabs.org>, and check if the mail has landed in your spam folder.

Using a narrow window (half of a 1080p monitor, so a browser window about 960 pixels wide), the "IABot Management Interface" header (including navigational buttons) overlays most of this notice, so that only the latter part of the notification – "spam folder" – is visible.

A similar problem can be found on other pages, with the header overlaying page content. For example, when reporting this bug (before being redirected to Phabricator), the page title was overlayed so that the ascenders of the letters were covered (that is, in "Report a bug", anything above the top of the height of the 'a' was obscured by the header).

This is a visual issue which prevents parts of the page from being accessible to users using certain browser widths (most notably the flash notifications, though to a limited extent probably other parts).

Visual of the more minor impact (on the 'Report a bug' page):

(I am not scrolled down on the page.)

Event Timeline

Throne3d updated the task description. (Show Details)
Throne3d updated the task description. (Show Details)Oct 28 2017, 12:10 AM
Cyberpower678 triaged this task as Normal priority.Nov 6 2017, 7:12 PM

Quoting the relevant documentation:

Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

  1. Reduce the amount or width of navbar items.
  2. Hide certain navbar items at certain screen sizes using responsive utility classes.
  3. Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Your navigation bar needs a minimum screen size of 1178px to not wrap, compared to the standard 768px value of @grid-float-breakpoint. I'd recommend setting @grid-float-breakpoint to @screen-lg-min (1200px). We can either recompile Bootstrap, or I can write a patch that overrides the relevant things (this is slightly tricky as it needs to also negate all the incorrect media queries).

Restricted Application added a subscriber: Cirdan. · View Herald TranscriptJun 11 2018, 5:20 PM

Let's go with the patch. There are multiple bootstrap themes in place, and it would suck to have to recompile all of them.

TheDragonFire added a subscriber: Cyberpower678.

@TheDragonFire If you open a pull request, please make it towards the test branch. That's what's live right now.

@Cyberpower678 will schedule for my sprint next week, sorry about the wait.

@Cyberpower678 will schedule for my sprint next week, sorry about the wait.

How did the sprint go? :-)