From e9cb78a924871cabef2ee2a229573c8d1e666cb5 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 20 Apr 2022 21:01:06 +0100
Subject: [PATCH] Add backplate to table size toggles

---
 .../main/resources/lib/hudson/iconSize.jelly  |  5 ++--
 war/src/main/less/modules/icon-size.less      | 25 ++++++++++++++++---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/iconSize.jelly b/core/src/main/resources/lib/hudson/iconSize.jelly
index 184faeb114..aeca1f1568 100644
--- a/core/src/main/resources/lib/hudson/iconSize.jelly
+++ b/core/src/main/resources/lib/hudson/iconSize.jelly
@@ -28,16 +28,15 @@ THE SOFTWARE.
   <div class="jenkins-icon-size">
     <d:taglib uri="local">
       <d:tag name="iconSizeLink">
-        <st:nbsp/>
         <j:choose>
           <j:when test="${sz==iconSize}">
-            <li class="jenkins-icon-size__items-item">
+            <li class="jenkins-icon-size__items-item" tooltip="${title}">
               ${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
             </li>
           </j:when>
           <j:otherwise>
             <li>
-              <a class="jenkins-button jenkins-button--transparent" href="${rootURL}/iconSize?${sz}">
+              <a class="jenkins-button jenkins-button--transparent" href="${rootURL}/iconSize?${sz}" tooltip="${title}">
                 ${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
               </a>
             </li>
diff --git a/war/src/main/less/modules/icon-size.less b/war/src/main/less/modules/icon-size.less
index 6ea5a5eaf4..852ba5bbfa 100644
--- a/war/src/main/less/modules/icon-size.less
+++ b/war/src/main/less/modules/icon-size.less
@@ -7,19 +7,36 @@
   &__items {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
 
     ol {
+      position: relative;
+      display: flex;
+      align-items: center;
       margin: 0;
       padding: 0;
       list-style-type: none;
-      display: flex;
-      align-items: center;
       gap: 0.25rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: 8px;
+        background: currentColor;
+        opacity: 0;
+        transition: var(--standard-transition);
+      }
+
+      &:hover {
+        &::before {
+          inset: -0.2rem;
+          opacity: 0.05;
+        }
+      }
     }
 
     li {
-      width: 32px;
-
       .jenkins-button {
         margin: 0!important;
         padding: 0!important;