From 368d8c73949e610c7ee92f4dbb5e443cf2059bf8 Mon Sep 17 00:00:00 2001
From: Kohsuke Kawaguchi <kk@kohsuke.org>
Date: Fri, 19 Apr 2013 10:11:28 -0700
Subject: [PATCH] Don't let the error icon get clipped when the text is short.

On Chrome (and possibly others), an inline element like span doesn't enlarge
its size to cover its content, so the 1px place holder wasn't taking effect.

To ensure the minimum height of 16px, make it an inline-block element. I'm
not entirely sure how an inline-block element with no fixed width would behave,
but with a bit of casual testing, the text inside seems to wrap OK.
---
 core/src/main/java/hudson/Util.java | 4 +---
 war/src/main/webapp/css/style.css   | 6 +++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/core/src/main/java/hudson/Util.java b/core/src/main/java/hudson/Util.java
index 68d0e2178b..1365bca2be 100644
--- a/core/src/main/java/hudson/Util.java
+++ b/core/src/main/java/hudson/Util.java
@@ -1264,9 +1264,7 @@ public class Util {
      * @since 1.173
      */
     public static String wrapToErrorSpan(String s) {
-        s = "<span class=error><img src='"+
-            Stapler.getCurrentRequest().getContextPath()+ Jenkins.RESOURCE_PATH+
-            "/images/none.gif' height=16 width=1>"+s+"</span>";
+        s = "<span class=error style='display:inline-block'>"+s+"</span>";
         return s;
     }
     
diff --git a/war/src/main/webapp/css/style.css b/war/src/main/webapp/css/style.css
index eff6d3e1cb..b81ace31b9 100644
--- a/war/src/main/webapp/css/style.css
+++ b/war/src/main/webapp/css/style.css
@@ -491,7 +491,7 @@ LABEL.attach-previous {
     font-weight: bold;
     padding-left: 20px;
     min-height: 16px;
-    background-image: url("../images/16x16/error.gif");
+    background-image: url("../images/16x16/error.png");
     background-position: left center;
     background-repeat: no-repeat;
 }
@@ -506,7 +506,7 @@ LABEL.attach-previous {
     font-weight: bold;
     padding-left: 20px;
     min-height: 16px;
-    background-image: url( "../images/16x16/warning.gif" );
+    background-image: url( "../images/16x16/warning.png" );
     background-position: left center;
     background-repeat: no-repeat;
 }
@@ -880,7 +880,7 @@ DIV.yahooTree td {
 
 /* ========================= search box at the top-right of the page ========================= */
 #search-box {
-  background: white url(../images/16x16/search.gif) no-repeat 2px center;
+  background: white url(../images/16x16/search.png) no-repeat 2px center;
   padding-left: 20px;
   width: 15em;
   position: static;