[JENKINS-75851] fix hover padding, limit tooltip to large names

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

core/src/main/resources/lib/layout/breadcrumb.jelly

@@ -50,15 +50,33 @@ THE SOFTWARE.
     <j:set var="baseUrl" value="${request2.originalRequestURI}" />
     <j:set var="hasLink" value="${attrs.href != null}" />
     <j:set var="isCurrent" value="${baseUrl == attrs.href}" />
+    <j:set var="shouldShowTitle" value="${attrs.title.length() > 25}" />
+
     <li aria-current="${(isCurrent or !hasLink)? 'page' : null}"  id="${attrs.id}" class="jenkins-breadcrumbs__list-item" data-type="breadcrumb-item">
       <j:choose>
         <j:when test="${!hasLink or isCurrent}">
-          <span title="${attrs.title}">${attrs.title}</span>
+          <j:choose>
+            <j:when test="${shouldShowTitle}">
+              <span tooltip="${attrs.title}">${attrs.title}</span>
+            </j:when>
+            <j:otherwise>
+              <span>${attrs.title}</span>
+            </j:otherwise>
+          </j:choose>
         </j:when>
         <j:otherwise>
-            <a title="${attrs.title}" href="${attrs.href}">
-              ${attrs.title}
-            </a>
+          <j:choose>
+            <j:when test="${shouldShowTitle}">
+              <a tooltip="${attrs.title}" href="${attrs.href}">
+                ${attrs.title}
+              </a>
+            </j:when>
+            <j:otherwise>
+              <a href="${attrs.href}">
+                ${attrs.title}
+              </a>
+            </j:otherwise>
+          </j:choose>
           <j:if test="${attrs.hasMenu or attrs.hasChildrenMenu}">
             <div data-iscurrent="${isCurrent}" data-href="${attrs.href}" data-base="${baseUrl}" tabindex="0" class="dropdown-indicator" data-model="${attrs.hasMenu}" data-children="${attrs.hasChildrenMenu}" >
               <l:icon class="icon-sm jenkins-!-text-color-secondary" src="symbol-chevron-down" />

src/main/js/components/dropdowns/templates.js

@@ -86,7 +86,7 @@ function menuItem(options) {
   const item = createElementFromHtml(`
       <${tag} class="jenkins-dropdown__item ${itemOptions.clazz ? xmlEscape(itemOptions.clazz) : ""}"
         ${itemOptions.url ? `href="${xmlEscape(itemOptions.url)}"` : ""} ${itemOptions.id ? `id="${xmlEscape(itemOptions.id)}"` : ""}
-        ${itemOptions.title ? `title="${xmlEscape(itemOptions.title)}"` : ""}>
+        ${itemOptions.tooltip ? `data-html-tooltip="${xmlEscape(itemOptions.tooltip)}"` : ""}>
           ${
             itemOptions.icon
               ? `<div class="jenkins-dropdown__item__icon">${

src/main/js/components/header/breadcrumbs-overflow.js

@@ -36,16 +36,18 @@ export default function computeBreadcrumbs() {
     (instance) => {
       const mappedItems = items.map((e) => {
         let href = e.querySelector("a");
+        let tooltip;
         if (href) {
+          tooltip = href.getAttribute("tooltip");
           href = href.href;
         }
 
         return {
           type: "link",
           clazz: "jenkins-breadcrumbs__overflow-item",
-          title: e.textContent,
           label: e.textContent,
           url: href,
+          tooltip,
         };
       });
 

src/main/scss/components/_breadcrumbs.scss

@@ -3,19 +3,20 @@
 .jenkins-breadcrumbs {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  margin-left: 0.625rem;
+  gap: 0.5rem;
+  margin-left: -2rem;
   overflow: hidden;
 
   &__list {
-    display: contents;
+    display: flex;
 
     & > * {
       z-index: 1;
     }
 
     &-item {
-      display: contents;
+      display: flex;
+      align-items: center;
 
       a::before {
         content: "";
@@ -24,6 +25,10 @@
         pointer-events: all !important;
       }
 
+      .dropdown-indicator {
+        margin-right: 4px;
+      }
+
       & > a,
       .dropdown-indicator {
         @include mixins.item($border: false);
@@ -56,7 +61,7 @@
         font-size: var(--font-size-sm);
         font-weight: var(--font-bold-weight);
         margin: 0;
-        padding: 0;
+        padding: 4px 8px;
         color: inherit;
         text-decoration: none;
         text-wrap: nowrap;
@@ -69,23 +74,15 @@
 
       // '/' separator between two items
       &::before {
-        content: "";
+        content: "/";
         position: relative;
-        width: 16px;
-        height: 20px;
         flex-shrink: 0;
-        mask-size: contain;
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-image: url("data:image/svg+xml,%3Csvg width='10' height='20' viewBox='0 0 10 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 18L8 2' stroke='black' stroke-width='1.5px' stroke-linecap='round'/%3E%3C/svg%3E%0A");
-        background: color-mix(
-          in sRGB,
-          var(--text-color-secondary) 30%,
-          transparent
-        );
+        color: color-mix(in sRGB, var(--text-color-secondary) 30%, transparent);
+        padding-left: 4px;
+        padding-right: 4px;
 
         @media (prefers-contrast: more) {
-          background: var(--text-color);
+          color: var(--text-color);
         }
       }
     }

src/main/scss/components/_dropdowns.scss

@@ -281,10 +281,11 @@ $dropdown-padding: 0.375rem;
     }
   }
 }
-.jenkins-breadcrumbs__overflow-item{
-    display: block;
-    overflow: hidden;
-    max-width: 25ch;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
+
+.jenkins-breadcrumbs__overflow-item {
+  display: block;
+  overflow: hidden;
+  max-width: 25ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}