From d2989cf09c57c8d719a9cef038d4cc41934a99f3 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Thu, 29 Oct 2020 10:56:13 -0400
Subject: [PATCH] Improve styling of new version badge

---
 css/80_app.css        | 10 ++++++----
 modules/ui/version.js |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index ee38b64c3..71f8ae448 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -4579,12 +4579,13 @@ img.tile-debug {
 ------------------------------------------------------- */
 /* For an icon (e.g. new version) */
 .badge {
-    display: inline-block;
+    display: inline-flex;
     background: #d32232;
     width: 21px;
-    height: 20px;
-    border-radius: 11px;
-    text-align: center;
+    height: 21px;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
 }
 .ideditor[dir='ltr'] .badge {
     margin-left: 6px;
@@ -4597,6 +4598,7 @@ img.tile-debug {
     width: 11px;
     height: 11px;
     color: #fff;
+    flex: 0 0 auto;
 }
 
 /* For text (e.g. upcoming events) */
diff --git a/modules/ui/version.js b/modules/ui/version.js
index ba909632b..a8b29eda5 100644
--- a/modules/ui/version.js
+++ b/modules/ui/version.js
@@ -37,15 +37,15 @@ export function uiVersion(context) {
         // only show new version indicator to users that have used iD before
         if (isNewVersion && !isNewUser) {
             selection
-                .append('div')
-                .attr('class', 'badge')
                 .append('a')
+                .attr('class', 'badge')
                 .attr('target', '_blank')
                 .attr('href', 'https://github.com/openstreetmap/iD/blob/release/CHANGELOG.md#whats-new')
                 .call(svgIcon('#maki-gift-11'))
                 .call(uiTooltip()
                     .title(t.html('version.whats_new', { version: currVersion }))
                     .placement('top')
+                    .scrollContainer(context.container().select('.main-footer-wrap'))
                 );
         }
     };