[UI] Expandable pipeline and step panels

I think the panels flexbox is not properly working. When we have pipeline or step names that are very long and the Drone UI window is very wide the panel sidebar stays the same max width and does not expand.

Could we have this panel expand to fit the content properly please?

example

2 Likes

@bradrydzewski Any thoughts on this?

Hi, I’m also interested in this.

I have temporarily fixed the CSS by using Stylebot extension with the following styles:

.container {
  max-width: 2000px;
}
@media only screen and (min-width: 1000px) {
  .stages {
    flex: 0 0 350px !important;
    width: 350px !important;
  }
}
@media only screen and (min-width: 1300px) {
  .stages {
    flex: 0 0 400px !important;
    width: 400px !important;
  }
}
@media only screen and (min-width: 1500px) {
  .stages {
    flex: 0 0 500px !important;
    width: 500px !important;
  }
}

Would drone/drone-ui accept a PR with a similar CSS change?