From e7a7e2edc58c2483075961551e6e7df93e829433 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Fri, 5 Feb 2016 00:14:36 -0500
Subject: [PATCH] Adjust styles, constrain tooltip to fit in map-control panel

---
 css/app.css            | 14 ++++++--------
 js/id/ui/background.js |  3 ++-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/css/app.css b/css/app.css
index 57aca5e29..0e02a6c12 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1809,18 +1809,16 @@ div.full-screen > button:hover {
     background: #E8EBFF;
 }
 
-.layer-list li.best > div {
+.layer-list li.best > div.best {
     display: inline-block;
-    height: 100%;
-    width: 10%;
-    padding: 5px 0;
+    padding: 5px;
     float: right;
 }
 
-.layer-list li.best > div > span {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
+/* make sure tooltip fits in map-control panel */
+/* if too wide, placement will be wrong the first time it displays */
+.layer-list li.best .tooltip-inner {
+    max-width: 160px;
 }
 
 .layer-list label {
diff --git a/js/id/ui/background.js b/js/id/ui/background.js
index 8292fb39f..c50492d20 100644
--- a/js/id/ui/background.js
+++ b/js/id/ui/background.js
@@ -103,11 +103,12 @@ iD.ui.Background = function(context) {
 
             enter.filter(function(d) { return d.best(); })
                 .append('div')
+                .attr('class', 'best')
                 .call(bootstrap.tooltip()
                     .title(t('background.best_imagery'))
                     .placement('left'))
                 .append('span')
-                .html('&nbsp;&#9733;');
+                .html('&#9733;');
 
             var label = enter.append('label');