Hey Phillip, I tried the same as you (without the 'display: inline-block' part) and it seems to be working. This should be used for resolution

Hey John,
the display attribute is needed to prevent the the overflow of the box.

Hey Philip, cheers for the reply! With 'display:inline-block' included, it does prevent overflow of the parent box as you said. However it also adds a big margin (equal in size to that in the description) to the right hand side of the page (see attached 'display-inline.jpg' . Do you see similar behaviour?

Hey John!
I only tested the the css with overflowing content. Inline-block apdapts its size to the size of its content. Sorry for that!
This modified rule should remove the left margin, prevent overflowing content and expand the box to at least the width of your screen. I tested it with Firefox only.

#main-panel{
margin-left:0px;
display: inline-block;
min-width:100%;
}

I'm not an active github user, so i will not promise anything, but i will try to get this modification into the repo.

Thanks a million Phillip!
That's fixed it alright!
I agree that your solution should be the resolution for this ticket:

margin-left:0px; display: inline-block; min-width:100%;

I'm not active with git either and am quite new to this, but cheers for your help!

johnwynne, b0rengar, there is a new version of Build Pipeline Plugin. Could you try it and check if the problem still is present?

Screenshots of current Version 1.4.8. IMHO it looks even worse.

b0rengar

I understand. I'm going to re-open JENKINS-28180 and review the current implementation. It is important to keep in mind:

1. If we use a liquid layout and we have several boxes (jobs) the expected result can see in the last screenshots.
2. If we use fixed-with boxes and we have several boxes (jobs) the expected result will be a horizontal scrollbar.

I'm going to work on it.

b0rengar

Did you clean your browser cache? I get different screenshots.

I've used the most popular screen resolutions and a pipeline with 6 steps:

1. 1024px:
2. 1280px:
3. 1366px:

What do you thing?

Hey Manuel,
my screen resolution is 1280x1024. I'm using Firefox 39.0. I did not clean my browser cache, but i edited css on the fly with out problems.
My personal opinion for the layout ( ">" stands for "better than"):
Big Screen > Scrolling > Overflowing content > too small to read

P.s.: You may noticed in my screenshots, i tried to fork and rejoin the jobs of the build pipeline. The execution of the jobs works as ecpected but the visulisation (especially of the rejoin) could be better. Are you aware of this Problem? Should I create a new ticket for this issue?

b0rengar

This proposal involves changes (important) if we want to do in a right way. In my opinion, the priority is to decide with layout we want for this UI (liquid, fixed-width boxes). It is clear than if you have a lot of builds (steps) the only option is horizontal scrollbar.

The bug described in this ticket is solved with the current implementation (1.4.8). Isn't that so?

No the bug is still there in my Enviroment! Maybe John Wynne could test it to have second test result.
I just noticed in your Screenshot that your Jenkins version is 1.554.3. My Jenkins version 1.628 and the Version of the original creator of this issue is 1.619. I think you should update your Jenkins to be able to reproduce this bug.

For the ui: it would be nice to have growing/shrinking boxes dependend on the screen size, but it is important that the content is always readable and overflowing is prevented, everything else is just nice to have.

b0rengar Ok, I'll work on it and share the result here. Do you agree?

I don't think you need my Permission or Agreement , but if you want it: I agree with you

Hello Manuel,
Is there any promotion regarding this issue?

yarivs I hope having time to jump here soon

Thx !

I think the only viable option for large pipelines is fixed width boxes.

My build pipeline has 6 jobs and the view is completely messed up.. The view´s div is aligned on the right and it does not use the full width of my screen

I am using build pipeline plugin v 1.4.8

Code changed in jenkins
User: Fishermans
Path:
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/d8eb803c054b30a7c423ad543f5433316ee6f81a
Log:

• Fixed JENKINS-29477

Code changed in jenkins
User: Dan Alvizu
Path:
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/b5d8f5251bcf1c9c1711e1d9513bd0dc66911629
Log:
Merge pull request #92 from fishermans/master

[Fixed JENKINS-29477]

Compare: https://github.com/jenkinsci/build-pipeline-plugin/compare/77a1a2ffa368...b5d8f5251bcf

Hi,

I installed the new main.css code. The size and content of the job names and information is now correct.
The problem is that the standard main frame horizontal scroll does not exist anymore.
So, navigation can be done using one of two alternatives:
1. Using keyboard arrows.
2. using the internal horizontal scroll which is semi hidden and does not useful if I have a big pipeline or want to see more than the latest build process.

yarivs, Please, file a new issue.

Resolved by https://github.com/fishermans with this PR.