diff --git a/css/80_app.css b/css/80_app.css
index 2a2ecf424..6962ce4c2 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -2916,14 +2916,43 @@ input.key-trap {
 }
 
 
+.over-map {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 71px;
+    bottom: 30px;
+    pointer-events: none;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-end;
+}
+.over-map > * {
+    pointer-events: auto;
+}
+
 /* Map Controls
 ------------------------------------------------------- */
 .map-controls {
     right: 0;
-    top: 141px;
+    top: 0;
     width: 40px;
     position: absolute;
     z-index: 100;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 5px 0;
+    pointer-events: none;
+}
+.map-controls:before {
+    content: '';
+    display: inline-block;
+    pointer-events: none;
+    width: 40px;
+    height: 100%;
+    max-height: 70px;
+    flex: 0 1 auto;
 }
 .ideditor[dir='rtl'] .map-controls {
     left: 0;
@@ -2935,6 +2964,7 @@ input.key-trap {
     width: 40px;
     background: rgba(0,0,0,.5);
     border-radius: 0;
+    pointer-events: auto;
 }
 
 .map-control > button:not(.disabled):focus,
@@ -3688,11 +3718,13 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     flex: 0 1 auto;
     position: relative;
     height: 100%;
+    max-width: 100%;
 }
 .map-pane {
     position: relative;
     top: 0;
     width: 400px;
+    max-width: 100%;
     height: 100%;
     padding-bottom: 60px;
     overflow: hidden;
@@ -4192,21 +4224,6 @@ img.tile-debug {
 }
 
 
-.over-map {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 71px;
-    bottom: 30px;
-    pointer-events: none;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: flex-end;
-}
-.over-map > * {
-    pointer-events: auto;
-}
-
 /* Information Panels
 ------------------------------------------------------- */
 .info-panels {
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 35a5433bb..b5b5f0dd3 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -146,42 +146,6 @@ export function uiInit(context) {
             .attr('dir', 'ltr')
             .call(map);
 
-
-        // Map controls
-        var controls = content
-            .append('div')
-            .attr('class', 'map-controls');
-
-        controls
-            .append('div')
-            .attr('class', 'map-control zoombuttons')
-            .call(uiZoom(context));
-
-        controls
-            .append('div')
-            .attr('class', 'map-control zoom-to-selection-control')
-            .call(uiZoomToSelection(context));
-
-        controls
-            .append('div')
-            .attr('class', 'map-control geolocate-control')
-            .call(uiGeolocate(context));
-
-        var uiPanes = [
-            uiPaneBackground(context),
-            uiPaneMapData(context),
-            uiPaneIssues(context),
-            uiPanePreferences(context),
-            uiPaneHelp(context)
-        ];
-
-        uiPanes.forEach(function(pane) {
-            controls
-                .append('div')
-                .attr('class', 'map-control map-pane-control ' + pane.id + '-control')
-                .call(pane.renderToggleButton);
-        });
-
         content
             .append('div')
             .attr('class', 'spinner')
@@ -300,13 +264,46 @@ export function uiInit(context) {
             .append('div')
             .attr('class', 'over-map');
 
+        // Map controls
+        var controls = overMap
+            .append('div')
+            .attr('class', 'map-controls');
+
+        controls
+            .append('div')
+            .attr('class', 'map-control zoombuttons')
+            .call(uiZoom(context));
+
+        controls
+            .append('div')
+            .attr('class', 'map-control zoom-to-selection-control')
+            .call(uiZoomToSelection(context));
+
+        controls
+            .append('div')
+            .attr('class', 'map-control geolocate-control')
+            .call(uiGeolocate(context));
+
         // Add panes
         // This should happen after map is initialized, as some require surface()
         var panes = overMap
             .append('div')
             .attr('class', 'map-panes');
 
+        var uiPanes = [
+            uiPaneBackground(context),
+            uiPaneMapData(context),
+            uiPaneIssues(context),
+            uiPanePreferences(context),
+            uiPaneHelp(context)
+        ];
+
         uiPanes.forEach(function(pane) {
+            controls
+                .append('div')
+                .attr('class', 'map-control map-pane-control ' + pane.id + '-control')
+                .call(pane.renderToggleButton);
+
             panes
                 .call(pane.renderPane);
         });