Fix "View on OSM" in sidebar footer

Fixes #1473.

css/app.css

@@ -370,7 +370,8 @@ a.hide {
 .pane {
     position:absolute;
     width:50%;
-    height:100%;
+    top: 0;
+    bottom: 30px;
 }
 
 .pane:first-child {
@@ -655,6 +656,15 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     z-index: 3;
 }
 
+.footer {
+    height: 30px;
+    position: absolute;
+    bottom: 0;
+    padding: 5px 10px 5px 10px;
+    border-top: 1px solid #ccc;
+    text-align: center;
+}
+
 /* Inspector
 ------------------------------------------------------- */
 
@@ -1003,7 +1013,7 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 .inspector-hover .spin-control,
 .inspector-hover .hide-toggle:before,
 .inspector-hover .more-buttons,
-.inspector-hover .inspector-external-links {
+.inspector-hover .view-on-osm {
     opacity: 0;
 }
 
@@ -1102,7 +1112,7 @@ input,
 .entity-editor-pane .header button,
 .spin-control,
 .more-buttons,
-.inspector-external-links,
+.view-on-osm,
 .hide-toggle:before,
 .radio-wrap button::before,
 .radio-wrap button.remove .icon {

js/id/ui/entity_editor.js

@@ -67,10 +67,7 @@ iD.ui.EntityEditor = function(context) {
             .attr('class', 'inspector-border raw-member-editor inspector-inner col12');
 
         $enter.append('div')
-            .attr('class', 'inspector-border raw-membership-editor inspector-inner col12');
-
-        $enter.append('div')
-            .attr('class', 'inspector-external-links inspector-inner col12');
+            .attr('class', 'raw-membership-editor inspector-inner col12');
 
         selection.selectAll('.preset-reset')
             .on('click', function() {
@@ -111,10 +108,6 @@ iD.ui.EntityEditor = function(context) {
             .call(iD.ui.RawMembershipEditor(context)
                 .entityID(id));
 
-        $body.select('.inspector-external-links')
-            .call(iD.ui.ViewOnOSM(context)
-                .entityID(id));
-
         function historyChanged() {
             var entity = context.hasEntity(id);
             if (!entity) return;

js/id/ui/inspector.js

@@ -33,6 +33,16 @@ iD.ui.Inspector = function(context) {
         var showEditor = state === 'hover' || context.entity(entityID).isUsed(context.graph());
         $wrap.style('right', showEditor ? '-0%' : '-100%');
 
+        var $footer = selection.selectAll('.footer')
+            .data([0]);
+
+        $footer.enter().append('div')
+            .attr('class', 'footer col12');
+
+        selection.select('.footer')
+            .call(iD.ui.ViewOnOSM(context)
+                .entityID(entityID));
+
         function showList(preset) {
             $wrap.transition()
                 .style('right', '-100%');