Concourse: UX: Sticky step headers while scrolling through large log output

[kcmannem]

When I have a bunch of steps expanded each displaying large amounts of logs. I'd like to know which step's logs I'm currently reading. Much like how team headers are sticky on the dashboard view, it would be helpful to have step headers stick while scrolling between steps.

[matthewpereira]

🆒

I think we could implement this with two pretty rudimentary CSS changes, first adding these three lines:

.build-step .header {
    ...
    position: sticky;
    top: 0;
    z-index: 1;
}

and then switching the body to have a margin instead of padding to clean things up:

.with-fixed-header .scrollable-body {
    width: 100%;
    box-sizing: border-box;
    /* old:
    /* padding: 10px;
    /* new: */
    margin: 10px;
}

That'll create something like this:

✨

I'll hunt down the CSS and make a PR for review as soon as I can.