1042599 - Job detail panel layout breaks for small window widths

Status: RESOLVED FIXED

(Tree Management :: Treeherder, defect, P1)

Description

[Ed Morley [:emorley]]

Broken out from bz's comment on dev.platform:

> 4)  If I click on a build with failures, about half of the space in the 
> panel that pops up (on its left) is unused, while the info I actually 
> care about (the failure messages) is scrunched into a tiny space about 
> 200px wide at most.

I think we should:
1) Make the left hand panel wrap
2) Reduce the min-width of the left hand panel (apart from the Buildbot Job Name and the tinderboxprint values, much of the rest will happily fit in ~200-250px)

Comment 1

[Boris Zbarsky [:bzbarsky]]

Attachment: Screenshot showing what I see

Ed, I think you're talking about the middle panel.  I'm talking about the left_ one.  The one that has nothing in it.  The gray rectangle in this screenshot.

What seems to be happening here is that the <nav class="navbar"> has a 33px fixed height set (by the "div#bottom-panel .navbar" rule), and has border-box sizing.  It also has 1px top and bottom borders, so only leaves 31px of vertical height for its contenst.

But the <ul class="bottom-panel-controls">, which is floated left, ends up 32.83333px tall for me, so sticks out the bottom of the <nav>.

Now the <div id="bottom-left-panel"> is also a left float, so gets placed as high as it can be, but to the right of preceding left floats.  So it gets offset to the right by the width of the <ul class="bottom-panel-controls">.

We should either give the <nav> an auto height and use a clearfix to make sure it's tall enough for its child floats or give the bottom-left-panel a "clear:left" or something.

Probably the former, because if you just clear:left on the bottom-left-panel then the actual error listing (<div id="button-center-panel">) ends up being placed to the right of the <ul class="tab-headers">, for the same reasons as above.  And having _that_ clear:left would also clear the bottom-left-panel and completely hide the errors...

Also, why are we using floats to achieve what is basically a table or flexbox layout anyway?  ;)

Comment 2

[Boris Zbarsky [:bzbarsky]]

Attachment: Another screenshot showing what this looks like on a build with errors

Comment 3

[Ed Morley [:emorley]]

Morphing summary now that I understand what was the problem. If I decrease the window width I get the grey panel showing similar to bz's screenshots, as opposed to http://snag.gy/y65Da.jpg

Whilst fixing this it would be great to also make the other tweaks I suggested in comment 0 (reducing min-width and wrapping) if possible :-)

Comment 4

[Joel Maher ( :jmaher ) (UTC -8)]

this is really a problem for me, one of the main reasons I don't use tree herder.

Comment 5

[William Lachance (:wlach)]

I'll take this one.

Comment 6

[William Lachance (:wlach)]

Attachment: Use flexbox to lay out bottom panel, improve behaviour when screen size reduced

So I was unable to reproduce the pathological behaviour described in the original bug, though I do see some bad behaviour as the screen size is reduced, for example some of the buttons on the right hand box scroll out of view. 

This patch fixes that issue and also allocates more space to the right hand panel, as Ed suggested. I also changed the CSS to use flexboxes, which are much easier to debug and reason about than the floats we were using before.

There are still remaining issues with the way the navbar collapses if you resize too small... I suspect the solution there is probably to stop using the bootstrap navbar, which wasn't really designed for this use case (it has all sorts of responsive design stuff which breaks down for our use case).

Comment 7

[Boris Zbarsky [:bzbarsky]]

> So I was unable to reproduce the pathological behaviour

Try setting a larger minimal font size.

Comment 8

[William Lachance (:wlach)]

(In reply to Boris Zbarsky [:bz] from comment #7)
> > So I was unable to reproduce the pathological behaviour
> 
> Try setting a larger minimal font size.

Ah yes, I see. Yes, the patch attached improves behaviour for that case, though I realized I could do even better by making the bootstrap navbar unresponsive with some CSS overrides. Going to attach a new patch which does just that.

Comment 9

[William Lachance (:wlach)]

Attachment: PR with changes + a minor responsiveness update

Comment 10

[Jonathan Eads ( :jeads )]

Comment on attachment 8480716 [details] [review]
PR with changes + a minor responsiveness update

This looks great. Thanks, I see a lot more of flexbox in our future.

Comment 11

[Jonathan French (:jfrench)]

Attachment: failureSummaryScroll_postFixIssue

There were some minor issues introduced possibly by landing, they are

o bug 1061304 (non-blocker)
o bug 1061312 (non-blocker)

And the attached screen grab, in which scrolling a Failure Summary panel puts the Failure|Annotations|SimilarJobs navbar out of its container. Also a non-blocker. I will reopen as requested by in-channel by wlach.

Comment 12

[William Lachance (:wlach)]

Attachment: Fix navbar scrolling out of view

Comment 14

[Ed Morley [:emorley]]

Comment on attachment 8483063 [details] [review]
Fix navbar scrolling out of view

https://github.com/mozilla/treeherder-ui/commit/e2482a851894e1b7ab981e99c825aeb2195ac2f3

Comment 15

[Treeherder GitHub Bugbot]

Commits pushed to master at https://github.com/mozilla/treeherder

https://github.com/mozilla/treeherder/commit/df73316391079ca0d6bfab8dc8f0ad8fe8e597dc
Bug 1042599 - Improve behaviour of bottom bar on smaller screens

* Use flexbox for layout instead of floats
* Remove use of responsive navbar
* Increase space allocated to detail panel

https://github.com/mozilla/treeherder/commit/4f67c206548752ccf288d548bb328529f98c0071
Merge pull request #133 from wlach/1042599

Bug 1042599 - Improve behaviour of bottom bar on smaller screens

https://github.com/mozilla/treeherder/commit/8a80dd193bc5725bc39f064141ed57e4b7771c21
Bug 1042599 - Fix overflow on bottom right panel

Navigation panel was scrolling along with the content, which we don't want.

https://github.com/mozilla/treeherder/commit/8377c183a1878200fbc0ac6d745709cbeba56e9d
Merge pull request #144 from wlach/1042599

Bug 1042599 - Fix overflow on bottom right panel