Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-72026

UI: Branch names dance down the screen (unclickable) in multi-branch pipeline jobs

      Open a Multi-Branch Pipeline job in Jenkins UI using Chrome on a Mac. [Jenkins 2.401.2 / Chrome 117.0.5938.62 / Mac OS X Ventura 13.5.2 (22G91)] When the 'Icon' size is set to 'M' or 'L' and the screen width is fairly narrow ('Number of builds' folds to two lines) then when the user mouses over the branch name to click into the job, the branch name dances down the web page. In fact, it becomes impossible to click into the branch build because it moves!

      I have a great video but I would have to clear it with our systems administrators to show it publicly. (It's on an internal Jenkins deployment.) FYI: It's possible this could be related to plugins if they modify UI tooling and/or settings. 

       

          [JENKINS-72026] UI: Branch names dance down the screen (unclickable) in multi-branch pipeline jobs

          Mark Waite added a comment -

          I can't duplicate the problem on my Windows computer with Google Chrome 116.0.5845.188 at various resolutions when I open the multibranch job on https://ci.jenkins.io/job/Plugins/job/configuration-as-code-plugin/ . Can you provide more details or duplicate the problem using ci.jenkins.io as the test case?

          Mark Waite added a comment - I can't duplicate the problem on my Windows computer with Google Chrome 116.0.5845.188 at various resolutions when I open the multibranch job on https://ci.jenkins.io/job/Plugins/job/configuration-as-code-plugin/ . Can you provide more details or duplicate the problem using ci.jenkins.io as the test case?

          Andre Leitao added a comment - - edited

           I have the same issue and it appears to be related to version 117 of chrome:

           

           

          Jenkins: Version 2.422

          chrome: Version 117.0.5938.92 (Official Build) (64-bit)

           

          Editing the html and adding class jenkins-table_link to the link seems to resolve the issue.

          Andre Leitao added a comment - - edited  I have the same issue and it appears to be related to version 117 of chrome:     Jenkins: Version 2.422 chrome: Version 117.0.5938.92 (Official Build) (64-bit)   Editing the html and adding class jenkins-table_link to the link seems to resolve the issue.

          We ran into this issue today too! Tested several browsers and it works correctly under Firefox but not Edge/Chrome.

          Firefox Version: 118.0.1 - Works correctly
          Google Chrome: 117.0.5938.92 - Does not work
          M$ Edge: 117.0.2045.47 - Does not work

          The workaround at the moment is to do one of the following:

          • maximize the windows so that the branch name doesn't get wrapper to multiple lines. These branch names are pretty long.
          • Use the browser Zoom function to zoom out until the branch name doesn't wrap.

          John Lengeling added a comment - We ran into this issue today too! Tested several browsers and it works correctly under Firefox but not Edge/Chrome. Firefox Version: 118.0.1 - Works correctly Google Chrome: 117.0.5938.92 - Does not work M$ Edge: 117.0.2045.47 - Does not work The workaround at the moment is to do one of the following: maximize the windows so that the branch name doesn't get wrapper to multiple lines. These branch names are pretty long. Use the browser Zoom function to zoom out until the branch name doesn't wrap.

          Michael added a comment - - edited

          I've updated Chrome to 118.0.5993.71 now and I have yet to see the issue again. Will update here if I see it again.

          UPDATE: Asked my colleague who was still on 117 and they showed me it still happening on their PC. I have asked them to update to 118 version and check it again. May be a bug in Chrome/Edge (same browser) rather than Jenkins itself

          UPDATE2: Colleague updated to 118 and confirmed that the visual glitch is no longer happening. Can others confirm?

          Michael added a comment - - edited I've updated Chrome to 118.0.5993.71 now and I have yet to see the issue again. Will update here if I see it again. UPDATE: Asked my colleague who was still on 117 and they showed me it still happening on their PC. I have asked them to update to 118 version and check it again. May be a bug in Chrome/Edge (same browser) rather than Jenkins itself UPDATE2: Colleague updated to 118 and confirmed that the visual glitch is no longer happening. Can others confirm?

          Andre Leitao added a comment - - edited

          I can confirm that the "dancing" issue doesn't happen anymore with chrome 118 but the drop down arrow is still not in the right place. adding class jenkins-table_link to the link would probably solve the issue. This was an older issue i think.

          Andre Leitao added a comment - - edited I can confirm that the "dancing" issue doesn't happen anymore with chrome 118 but the drop down arrow is still not in the right place. adding class jenkins-table_link to the link would probably solve the issue. This was an older issue i think.

          Basil Crow added a comment -

          Basil Crow added a comment - Could by trivially fixed by adding jenkins-table__link to the list of classes in https://github.com/jenkinsci/branch-api-plugin/blob/fe580db4ea71e6a2ce440d8d79d55d8c1c6a4b93/src/main/resources/jenkins/branch/ItemColumn/column.jelly .

          Debayan added a comment -

          Created a PR which might solve this : https://github.com/jenkinsci/branch-api-plugin/pull/433

          Debayan added a comment - Created a PR which might solve this : https://github.com/jenkinsci/branch-api-plugin/pull/433

          Mark Waite added a comment -

          Thanks to debghosh666 for the fix!

          Mark Waite added a comment - Thanks to debghosh666 for the fix!

            Unassigned Unassigned
            ingyhere John Engelke
            Votes:
            1 Vote for this issue
            Watchers:
            10 Start watching this issue

              Created:
              Updated:
              Resolved: