The screenshot shows how it was in 2.4. I didn't capture the problem in 2.8 before I downgraded. But this screenshot illustrates the width of my pipeline

Merge of: https://github.com/jenkinsci/pipeline-stage-view-plugin/commit/8cc39feb4b6c60d952d0bc331083f7a2269a3be0
from PR: https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/35
released in 2.5 was a regressions.

The author says "with no side effects from my basic checks.". Well, basic checks was not enough.

I don't think it's a good idea to just change the CSS to fix a small specific problem and introduce a larger problem.

Please revert this!

From https://www.w3schools.com/css/css_float.asp:

When clearing floats, you should match the clear to the float. If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.

The test results div has float: right, so I guess the stage view should have clear: right.

This assumes test results plugin is doing it right. That can maybe be argued. But they where here first and it's a very widely used plugin.

Same issue here, and it is worse because to the right we have graphs for Checkstyle, Duplicate Code, Open Tasks and Test Result trends.

As a result, the pipeline is not visible on the screen at all without scrolling down.

Bump - this looks pretty terrible. (Sidenote: trends graphs are useless) but even if they weren't, why are they breaking the pipeline view and pushing it down to the bottom of the page?

This is especially bad with auto-refresh. The pipeline is supposed to refresh every second or so on auto-refresh. But you don't even see it!! because it's below the fold. All you see is stupid static trends, which don't even change with each refresh anyway. How can I get rid of the trend graphs at least, so that the actual useful, regularly refreshing pipeline view is up at the top again? I never really even asked for those trends graphs anyway.

Downgrading this because CSS layout quirks do not merit a critical priority vs. actually broken functionality. Also ivanb please try Blue Ocean for this or feel free to submit a PR including a fix – Stage View is only receiving limited maintenance fixes since the bulk of development effort is going to Blue Ocean.

svanoort, I am taking ownership of this one, please help be review it, merge and making a new release. This bug is really serious, and while I do like BlueOcean UI design, the reality is that it will take another 2-3 years to become usable for medium and customers. As of today it still lacks views and folders, not to mention serious bugs. I tried to promote it to other users without any success. For startups / new small projects is quite good.

Here is the https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/55 — that reverts the regression, original was the wrong fix, apparently sorting a minor issue by causing a much bigger one.

Thank you ssbarnea ! I'm glad this one is finally moving. BlueOcean is at this time indeed not yet a serious alternative.

For something with a one line fix that causes so much pain hand patching jar files every time there's a jenkins update is getting really old now.

Blue ocean is not an alternative.. it doesn't even have a stage view..

I removed myself as I managed to move from Jenkins to Zuul. It would still be nice if somoene could fix it.

tonyhoylerps marcus_phi You guys are welcome to take a stab at the proper fix for this if you like – the blocker with https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/55
is that it is simply reverting https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/35 – which makes sense with wider screens now quite common.

What needs to happen is the graphs need to be at the top until the screen is wide enough, and then they should reflow to the right – but I'm no expert at CSS and our layouts aren't trivial, so I'm not sure how to do that. If someone else can provide a solution for that goal, I'd be happy to merge and release it though.

svanoort: I agree with the proper solution of the GUI layout. 

But there stops our agreement. Either you do not understand the problem, or this project has very strange policies for regressions.

1. We do have wide screen (I have a retina screen, 2560 px wide!), but if you have a pipeline larger than around 6 stages with stage names that have long words, this problem still occurs.
   See and
2. In my projects the regression policy are: if a change cause major regressions, you revert it until it's fixed, unless this would cause even worse consequences. I think that is a sound policy. What do you think?
   • Otherwise you are encouraging people to just solve their small use case and don't test for any regressions. This change was not properly tested with realistic test data and should never have been merged. Can you please admit that.
   • I think the value of the change is small and the damage of the regression is large, so this should be an easy call.
   • Maybe you should get a second opinion on this.
3. I tried to fix it properly, and like you, my CSS skills are limited, but I think I can say that much that there is no easy fix due to how the html of the surrounding elements are structured. You would need to change in the test results plugin and or core. So reverting this is reasonable because it's likely to never get fixed (note that it's more than a year since I opened this).

I've been struggling with this issue too, I've managed to get it to look batter with some CSS, although this can break easily, if the div holding the test result charts had an ID or class to target via CSS that would be batter.
For now this has worked for me:

div#description + div + div > div {
 display: inline-block;
 vertical-align: top; 
}

div.table-box {
    vertical-align: middle;
    float: left;
}

There is still quite wasted space when you have a pipeline with lots of stages. I'm not sure if it's a problem with the stage view or the job page as a whole. It seems like it would be much nicer if the other widgets were displayed in columns rather than rows as in the screen shot in Alex Zeleznikov's reply.

The attached screen shot was rendered using version 2.13 of the pipeline-stage-view-plugin.

since this issue probably won't get fixed any time soon, as a workaround I applied the above CSS as a custom css following this answer : https://superuser.com/questions/318912/how-can-i-override-the-css-of-a-site-in-firefox-with-usercontent-css

my steps were:

1. find folder for firefox profile
2. create folder "chrome"
3. create userContent.css (content below, adjust domain to your setup)
4. in about:config set `toolkit.legacyUserProfileCustomizations.stylesheets ` to true
5. restart firefox
6. go to colleagues and gloat ("Well it works for me. Maybe there is something wrong with your machine?")

my `userContent.css`:

@-moz-document domain(myjenkins.mydomain.de) {
    div#description + div + div > div {
        display: inline-block;
        vertical-align: top; 
       }
       
       div.table-box {
           vertical-align: middle;
           float: left;
       }
} 

it still doesn't looks prettyy bad, but at least I don't have to scroll as far. I guess the problem is that graphs from warnings-NG plugin have a slightly different layout than other graphs.