Closed Bug 1042599 Opened 7 years ago Closed 7 years ago

Job detail panel layout breaks for small window widths


(Tree Management :: Treeherder, defect, P1)



(Not tracked)



(Reporter: emorley, Assigned: wlach)




(5 files, 1 obsolete file)

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)
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?  ;)
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

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 :-)
Summary: Reduce the width of the left hand side of job metadata panel & make the contents wrap → Job detail panel layout breaks for small window widths
Blocks: 1043474
this is really a problem for me, one of the main reasons I don't use tree herder.
Priority: P2 → P1
Blocks: 1059368
I'll take this one.
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).
Assignee: nobody → wlachance
Attachment #8480254 - Flags: review?(jeads)
> So I was unable to reproduce the pathological behaviour

Try setting a larger minimal font size.
(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.
Attachment #8480254 - Attachment is obsolete: true
Attachment #8480254 - Flags: review?(jeads)
Attachment #8480716 - Flags: review?(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.
Attachment #8480716 - Flags: review?(jeads) → review+
Closed: 7 years ago
Resolution: --- → FIXED
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.
Resolution: FIXED → ---
Duplicate of this bug: 1060275
Attachment #8483063 - Flags: review?(jeads) → review+
Closed: 7 years ago7 years ago
Resolution: --- → FIXED
Commits pushed to master at
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
Merge pull request #133 from wlach/1042599

Bug 1042599 - Improve behaviour of bottom bar on smaller screens
Bug 1042599 - Fix overflow on bottom right panel

Navigation panel was scrolling along with the content, which we don't want.
Merge pull request #144 from wlach/1042599

Bug 1042599 - Fix overflow on bottom right panel
You need to log in before you can comment on or make changes to this bug.