OOjs UI: Toolbar should collapse items rather than span multiple lines when the window is narrow



When the browser's window is narrow (or at high zoom), toolbar buttons span several lines, and all the buttons except those displayed on the last line are lacking a background.

This causes the page's content to show behind them, hence making them quite hard to read and use them (see screenshot).

Version: unspecified
Severity: enhancement

attachment VisualEditor - Toolbar - No background for buttons2.png ignored as obsolete

bzimport added a project: OOjs-UI.Via ConduitNov 22 2014, 2:06 AM
bzimport set Reference to bz50227.
gpaumier created this task.Via LegacyJun 26 2013, 1:30 PM
TheDJ added a comment.Via ConduitJun 26 2013, 6:24 PM

This can be fixed by changing the background image of .ve-ui-toolbar-bar to specify background-size: auto 100%; That does however affect the gradient in 1 row mode (size the background image is 2 rows high currently). So the background image might have to be regenerated for this.

Ryasmeen added a comment.Via ConduitNov 11 2013, 10:20 PM

Right now, when the browser is resized to narrow window OR at high zoom,all the toolbar buttons have a background and the contents of page does not show up behind the toolbar .But, the buttons on the first line is now overlapping with the Edit/Edit-beta buttons before user scrolls down the article.

Tested on MAC OS X 10.8.5 using firefox 20 and chrome 26.0.1410.65 on page:

See the screenshots attached.

Ryasmeen added a comment.Via ConduitNov 11 2013, 10:21 PM

Created attachment 13767
all buttons having background and content not showing up


Ryasmeen added a comment.Via ConduitNov 11 2013, 10:22 PM

Created attachment 13768
Toolbar buttons overlapping with Edit/Edit-beta button


Jdforrester-WMF added a comment.Via ConduitOct 31 2014, 10:59 PM

Marking as depending on bug 72159 because presumably we'd want to push groups into the catch-all group or something?

Jdforrester-WMF added a comment.Via ConduitOct 31 2014, 10:59 PM
  • Bug 70928 has been marked as a duplicate of this bug. ***
Jdforrester-WMF moved this task to Next-up on the OOjs-UI workboard.Via WebDec 2 2014, 12:35 AM
Prtksxna added a subscriber: Prtksxna.Via WebDec 2 2014, 4:08 PM
matmarex added a subscriber: matmarex.Via WebFri, Feb 27, 7:49 PM

Something like https://gerrit.wikimedia.org/r/#/c/193282/ could possibly help here.

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.