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

Baseline shift in breadcrumbs

    XMLWordPrintable

Details

    • frank, Blue Ocean 1.2-beta2, Blue Ocean 1.2-beta3

    Description

      Seems like this has changed somewhat since the new headers

      https://ci.blueocean.io/blue/organizations/jenkins/folders%2Fsubfolder%2Fthird-folder%2Fblueocean-demo-project2/activity

      Original request
      Check the attached screenshot to see a closeup of the problem.

      You can reproduce it here:
      https://ci.blueocean.io/blue/organizations/jenkins/folders%2Fsubfolder%2Fthirdfolder%2FhelloPipeline/activity

      Attachments

        Issue Links

          Activity

            cliffmeyers Cliff Meyers added a comment -

            Having written this component, I'm happy to take on the fix for it at some point.

            I think the cause of this problem is that wrapping the entire component in a Link component or anchor element is causing the odd alignment issue given how complex the nested content is. I remember fiddling with this for a long time and I am not confident it can handled cleanly in a cross-browser way. It would probably be easier to get consistent alignment if the component used a tags internally.

            Unfortunately the a tags are typically React Router "Link" instances, and when I built the ExpandablePath component I did not want to couple it to React Router - especially since it would create a JDL -> react-router dependency.

            However I think there be a better way to address this issue that still decouples it from React Router. Basically we could pass a "linkElement" prop inside that is the link element (either a React Router link, or a simple anchor element) that is cloned appropriately for each of the child elements.

            Any thoughts sophistifunk?

            cliffmeyers Cliff Meyers added a comment - Having written this component, I'm happy to take on the fix for it at some point. I think the cause of this problem is that wrapping the entire component in a Link component or anchor element is causing the odd alignment issue given how complex the nested content is. I remember fiddling with this for a long time and I am not confident it can handled cleanly in a cross-browser way. It would probably be easier to get consistent alignment if the component used a tags internally. Unfortunately the a tags are typically React Router "Link" instances, and when I built the ExpandablePath component I did not want to couple it to React Router - especially since it would create a JDL -> react-router dependency. However I think there be a better way to address this issue that still decouples it from React Router. Basically we could pass a "linkElement" prop inside that is the link element (either a React Router link, or a simple anchor element) that is cloned appropriately for each of the child elements. Any thoughts sophistifunk ?

            People

              nicu Nicolae Pascu
              jlong John Long
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: