Scrollbars for scrolling through stages and scrolling console output within a stage overlap

[Hawk777]

Jenkins and plugins versions report

Environment

Jenkins: 2.440.3
OS: Linux - 5.15.0-105-generic
Java: 17.0.10 - Private Build (OpenJDK 64-Bit Server VM)
---
active-directory:2.35
antisamy-markup-formatter:162.v0e6ec0fcfcf6
apache-httpcomponents-client-4-api:4.5.14-208.v438351942757
asm-api:9.7-33.v4d23ef79fcc8
basic-branch-build-strategies:81.v05e333931c7d
blueocean-autofavorite:1.2.5
blueocean-commons:1.27.12
blueocean-config:1.27.12
blueocean-core-js:1.27.12
blueocean-dashboard:1.27.12
blueocean-events:1.27.12
blueocean-git-pipeline:1.27.12
blueocean-i18n:1.27.12
blueocean-jwt:1.27.12
blueocean-personalization:1.27.12
blueocean-pipeline-api-impl:1.27.12
blueocean-pipeline-scm-api:1.27.12
blueocean-rest:1.27.12
blueocean-rest-impl:1.27.12
blueocean-web:1.27.12
bootstrap5-api:5.3.3-1
bouncycastle-api:2.30.1.77-225.v26ea_c9455fd9
branch-api:2.1152.v6f101e97dd77
build-user-vars-plugin:166.v52976843b_435
caffeine-api:3.1.8-133.v17b_1ff2e0599
checks-api:2.2.0
cloudbees-folder:6.901.vb_4c7a_da_75da_3
commons-lang3-api:3.13.0-62.v7d18e55f51e2
commons-text-api:1.11.0-109.vfe16c66636eb_
conditional-buildstep:1.4.3
copyartifact:722.v0662a_9b_e22a_c
credentials:1337.v60b_d7b_c7b_c9f
credentials-binding:657.v2b_19db_7d6e6d
data-tables-api:2.0.3-1
display-url-api:2.200.vb_9327d658781
durable-task:555.v6802fe0f0b_82
echarts-api:5.5.0-1
envinject:2.908.v66a_774b_31d93
envinject-api:1.199.v3ce31253ed13
favorite:2.208.v91d65b_7792a_c
font-awesome-api:6.5.1-3
git:5.2.1
git-client:4.7.0
github:1.38.0
github-api:1.318-461.v7a_c09c9fa_d63
github-branch-source:1787.v8b_8cd49a_f8f1
gitlab-plugin:1.8.0
gson-api:2.10.1-15.v0d99f670e0a_7
htmlpublisher:1.33
http_request:1.18
instance-identity:185.v303dc7c645f9
ionicons-api:70.v2959a_b_74e3cf
jackson2-api:2.17.0-379.v02de8ec9f64c
jakarta-activation-api:2.1.3-1
jakarta-mail-api:2.1.3-1
javax-activation-api:1.2.0-6
javax-mail-api:1.6.2-9
jaxb:2.3.9-1
jenkins-design-language:1.27.12
jersey2-api:2.42-147.va_28a_44603b_d5
jjwt-api:0.11.5-112.ve82dfb_224b_a_d
joda-time-api:2.12.7-29.v5a_b_e3a_82269a_
jquery3-api:3.7.1-2
json-api:20240303-41.v94e11e6de726
json-path-api:2.9.0-58.v62e3e85b_a_655
junit:1265.v65b_14fa_f12f0
lockable-resources:1246.v28b_e4cc6fa_16
mailer:472.vf7c289a_4b_420
mapdb-api:1.0.9-40.v58107308b_7a_7
matrix-auth:3.2.2
matrix-project:822.824.v14451b_c0fd42
mattermost:3.1.3
metrics:4.2.21-449.v6960d7c54c69
mina-sshd-api-common:2.12.1-101.v85b_e08b_780dd
mina-sshd-api-core:2.12.1-101.v85b_e08b_780dd
okhttp-api:4.11.0-172.vda_da_1feeb_c6e
parameterized-scheduler:262.v00f3d90585cc
parameterized-trigger:787.v665fcf2a_830b_
pipeline-build-step:540.vb_e8849e1a_b_d8
pipeline-graph-analysis:216.vfd8b_ece330ca_
pipeline-graph-view:240.v92d72e312999
pipeline-groovy-lib:704.vc58b_8890a_384
pipeline-input-step:495.ve9c153f6067b_
pipeline-milestone-step:119.vdfdc43fc3b_9a_
pipeline-model-api:2.2198.v41dd8ef6dd56
pipeline-model-definition:2.2198.v41dd8ef6dd56
pipeline-model-extensions:2.2198.v41dd8ef6dd56
pipeline-rest-api:2.34
pipeline-stage-step:312.v8cd10304c27a_
pipeline-stage-tags-metadata:2.2198.v41dd8ef6dd56
pipeline-utility-steps:2.16.2
plain-credentials:179.vc5cb_98f6db_38
plugin-util-api:4.1.0
promoted-builds:945.v597f5c6a_d3fd
pubsub-light:1.18
rebuild:332.va_1ee476d8f6d
resource-disposer:0.23
reverse-proxy-auth-plugin:1.7.7
run-condition:1.7
scm-api:689.v237b_6d3a_ef7f
script-security:1335.vf07d9ce377a_e
sidebar-link:2.4.1
snakeyaml-api:2.2-111.vc6598e30cc65
sse-gateway:1.26
ssh-agent:367.vf9076cd4ee21
ssh-credentials:337.v395d2403ccd4
ssh-slaves:2.948.vb_8050d697fec
sshd:3.322.v159e91f6a_550
structs:337.v1b_04ea_4df7c8
subversion:1256.vee91953217b_6
token-macro:400.v35420b_922dcb_
trilead-api:2.142.v748523a_76693
variant:60.v7290fc0eb_b_cd
workflow-aggregator:596.v8c21c963d92d
workflow-api:1291.v51fd2a_625da_7
workflow-basic-steps:1049.v257a_e6b_30fb_d
workflow-cps:3894.vd0f0248b_a_fc4
workflow-durable-task-step:1336.v768003e07199
workflow-job:1400.v7fd111b_ec82f
workflow-multibranch:773.vc4fe1378f1d5
workflow-scm-step:427.v4ca_6512e7df1
workflow-step-api:657.v03b_e8115821b_
workflow-support:896.v175a_a_9c5b_78f
ws-cleanup:0.45

What Operating System are you using (both controller, and any agents involved in the problem)?

Ubuntu 22.04 (Jenkins server), Gentoo (web browser)

Reproduction steps

1. Run a pipeline which has one stage with lots of steps, and where one of the steps produces lots of output.
2. Navigate to the Pipeline Console page for that build.
3. In the left sidebar, navigate to the stage.
4. In the right pane, scroll to the step with lots of output and use the expander triangle to view its console output.

Expected Results

There should either be just one scrollbar in the right pane (with the console output pushing subsequent steps down), or there should be two scrollbars both logically and visually nested inside each other, the outer being to scroll through steps and the inner to scroll through lines of console output.

Actual Results

There are two scrollbars, and while they are logically nested, they are not visually nested; instead, they overlap, preventing one of them from being clicked on at all. See attached screenshot; note the two circled scrollbar thumbs and that they are in a vertical line with each other.

Anything else?

This is with Firefox 115.10.0ESR under XFCE 4.18.

Are you interested in contributing a fix?

No response

[bencehornak]

I would also strongly prefer to not have nested scrollable components, because they result in a pretty annoying scrolling experience (it somehow jumps up and down in Firefox, it's really uncontrollable). Additionally, the height restricted expanded step makes it really frustrating to find issues in long step outputs, especially, when the issue is in the middle (like it is the case with most Gradle outputs).

So my suggestion would be to remove the height restriction on the expanded steps, and thus ditch the inner scrollbar. The outer scrollbar takes care of scrolling through all steps anyways.