[JENKINS-75990] Use the same styling for title bar mouse over effect

[ridemountainpig]

Use the same styling for title bar mouse over effect.
See JENKINS-75990.

Testing done

Before

After

Proposed changelog entries

• Use the same styling for title bar mouseover effect.

Proposed changelog category

/label web-ui

Proposed upgrade guidelines

• Use the same styling for title bar mouse over effect

Submitter checklist

• The Jira issue, if it exists, is well-described.
• The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
• There is automated testing or an explanation as to why this change has no tests.
• New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
• New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
• New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
• For dependency updates, there are links to external changelogs and, if possible, full differentials.
• For new APIs and extension points, there is a link to at least one consumer.

Desired reviewers

@mention

Before the changes are marked as ready-for-merge:

Maintainer checklist

• There are at least two (2) approvals for the pull request and no outstanding requests for change.
• Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
• Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
• Proper changelog labels are set so that the changelog can be generated automatically.
• If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).
• If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[ridemountainpig]

/label web-ui

[uhafner]

Thanks for creating this PR! I think the colors and the border already look correct. What is missing: the height of the breadcrumb (the textual part) is not the same as the height of the buttons and the sidebar. Can this be adjusted as well?

[ridemountainpig]

Thanks for creating this PR! I think the colors and the border already look correct. What is missing: the height of the breadcrumb (the textual part) is not the same as the height of the buttons and the sidebar. Can this be adjusted as well?

I’ve adjusted the breadcrumb height so it now matches the buttons and the sidebar. Thank you.

[janfaracik]

Hey, just on leave at the moment but I'll take a look at this.

[uhafner]

Looks good now, thanks for the fix!

[uhafner]

Do you have an idea (not in this PR) how we can add a hover effect for the Jenkins logo as well? The hover effect for this part of the breadcrumb is almost invisible right now.

[ridemountainpig]

Do you have an idea (not in this PR) how we can add a hover effect for the Jenkins logo as well? The hover effect for this part of the breadcrumb is almost invisible right now.

Sure, I can try adding a hover effect for the Jenkins logo in another PR.

[janfaracik]

Thanks -

Not a fan of the increased height, I don't think that the breadcrumbs need to match the height of the buttons on the other side of the screen, seeing as breadcrumbs are just text vs icons.

Also, in regards to the Jenkins logo - would support decreasing the opacity further on hover, but I'm not sure how we could apply this background to it without it looking off. The reason for not having the background on the breadcrumbs in the first place was for consistency with the logo.

---

Not blocking - would be good to fix whilst in this space:

[ridemountainpig]

@janfaracik I have updated it. @uhafner, what do you think about the breadcrumb height?

[uhafner]

Well, for me it is a matter of symmetry. So I personally prefer the same height. It already looks weird that the height of the chevron overlay is different.

But this is not a blocker for me. Jan is the designer, he probably knows better what to do... what think other people?

[ridemountainpig]

@janfaracik, what are your thoughts?

[janfaracik]

Apologies for taking so long to respond - could you rebase with master and I'll get back? Thanks :)

[ridemountainpig]

Apologies for taking so long to respond - could you rebase with master and I'll get back? Thanks :)

@janfaracik I have updated it. Thank you.

[janfaracik]

%breadcrumb-interactive-base {
        @include mixins.item($border: false);

        --item-background: transparent;

        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.75rem;
      }

      & > a {
        @extend %breadcrumb-interactive-base;
      }

      .dropdown-indicator {
        @extend %breadcrumb-interactive-base;

        padding: 0 0.3125rem;
      }

      & > a,
      span {
        position: relative;
        font-size: var(--font-size-sm);
        font-weight: var(--font-bold-weight);
        margin: 0;
        padding: 0.25rem 0.5rem;
        color: inherit;
        text-decoration: none;
        text-wrap: nowrap;
        flex-shrink: 0;
        max-width: 25ch;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      // '/' separator between two items
      &::before {
        content: "/";
        position: relative;
        flex-shrink: 0;
        color: color-mix(in sRGB, var(--text-color-secondary) 30%, transparent);
        padding-left: 4px;
        padding-right: 4px;

        @media (prefers-contrast: more) {
          color: var(--text-color);
        }
      }
    }
  }

Thanks! Try this - couldn't make a clean suggestion through GitHub - I've changed Iines 28 to 79.

A few tweaks I've made:

• @include mixins.item supports ($border: false) to hide the border - so no need for the hover, active, ... conditions
• Made the dropdown the same height as the breadcrumb item
• Fixed the mouse down state - it now pulses like other buttons
• Removed some unused variables

[ridemountainpig]

@janfaracik I have updated it. Thank you.

[janfaracik]

LGTM - thanks!

[timja]

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

[MarkEWaite]

Causes JENKINS-76299 - Jenkins 2.536 and later overlap text when viewing builds for jobs with long names

@ridemountainpig could you investigate further and propose a fix? We'll choose the next LTS baseline by Dec 10, 2025 and I'd really like JENKINS-76299 to be fixed while still retaining the fix for JENKINS-75990.

I've assigned that issue to you in Jira. If you're not able to investigate it and provide a fix, let me know and I'll unassign it from you.

[ridemountainpig]

Causes JENKINS-76299 - Jenkins 2.536 and later overlap text when viewing builds for jobs with long names

@ridemountainpig could you investigate further and propose a fix? We'll choose the next LTS baseline by Dec 10, 2025 and I'd really like JENKINS-76299 to be fixed while still retaining the fix for JENKINS-75990.

I've assigned that issue to you in Jira. If you're not able to investigate it and provide a fix, let me know and I'll unassign it from you.

Got it, I will take a look at this.

[ridemountainpig]

Causes JENKINS-76299 - Jenkins 2.536 and later overlap text when viewing builds for jobs with long names

@ridemountainpig could you investigate further and propose a fix? We'll choose the next LTS baseline by Dec 10, 2025 and I'd really like JENKINS-76299 to be fixed while still retaining the fix for JENKINS-75990.

I've assigned that issue to you in Jira. If you're not able to investigate it and provide a fix, let me know and I'll unassign it from you.

@MarkEWaite I've fixed it in #11334.

[MarkEWaite]

@MarkEWaite I've fixed it in #11334.

Thanks very much! I've done some interactive testing of #11334 and confirmed it is fixed. Thanks again!