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')) ); } };