Flexbox the background and map data layer lists

css/80_app.css

@@ -3078,6 +3078,7 @@ div.full-screen > button:hover {
     background-color: #fff;
     color: #7092ff;
     position: relative;
+    display: flex;
 }
 
 .layer-list:empty {
@@ -3108,9 +3109,8 @@ div.full-screen > button:hover {
 }
 
 .layer-list li.best > div.best {
-    display: inline-block;
     padding: 5px;
-    float: right;
+    flex: 0 0 auto;
 }
 
 [dir='rtl'] .list-item-data-browse svg {
@@ -3124,9 +3124,9 @@ div.full-screen > button:hover {
 }
 
 .layer-list label {
-    display: block;
     padding: 5px 10px;
     cursor: pointer;
+    flex: 1 1 auto;
 }
 
 [dir='ltr'] .layer-list .indented label {
@@ -3145,7 +3145,6 @@ div.full-screen > button:hover {
 
 .map-data-pane .layer-list button,
 .background-pane .layer-list button {
-    float: right;
     height: 100%;
     border-left: 1px solid #ccc;
     border-radius: 0;
@@ -3154,7 +3153,6 @@ div.full-screen > button:hover {
 }
 [dir='rtl'] .map-data-pane .layer-list button,
 [dir='rtl'] .background-pane .layer-list button {
-    float: left;
     border-left: none;
     border-right: 1px solid #ccc;
 }
@@ -3164,12 +3162,12 @@ div.full-screen > button:hover {
     opacity: 0.5;
 }
 
-.map-data-pane .layer-list button:first-of-type,
-.background-pane .layer-list button:first-of-type {
+.map-data-pane .layer-list button:last-of-type,
+.background-pane .layer-list button:last-of-type {
     border-radius: 0 3px 3px 0;
 }
-[dir='rtl'] .map-data-pane .layer-list button:first-of-type,
-[dir='rtl'] .background-pane .layer-list button:first-of-type {
+[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
+[dir='rtl'] .background-pane .layer-list button:last-of-type {
     border-radius: 3px 0 0 3px;
 }
 

modules/ui/background.js

@@ -135,6 +135,19 @@ export function uiBackground(context) {
             .classed('layer-custom', function(d) { return d.id === 'custom'; })
             .classed('best', function(d) { return d.best(); });
 
+        var label = enter
+            .append('label');
+
+        label
+            .append('input')
+            .attr('type', type)
+            .attr('name', 'layers')
+            .on('change', change);
+
+        label
+            .append('span')
+            .text(function(d) { return d.name(); });
+
         enter.filter(function(d) { return d.id === 'custom'; })
             .append('button')
             .attr('class', 'layer-browse')
@@ -155,23 +168,9 @@ export function uiBackground(context) {
             .append('span')
             .html('★');
 
-        var label = enter
-            .append('label');
-
-        label
-            .append('input')
-            .attr('type', type)
-            .attr('name', 'layers')
-            .on('change', change);
-
-        label
-            .append('span')
-            .text(function(d) { return d.name(); });
-
 
         layerList.selectAll('li')
-            .sort(sortSources)
-            .style('display', layerList.selectAll('li').data().length > 0 ? 'block' : 'none');
+            .sort(sortSources);
 
         layerList
             .call(updateLayerSelections);

modules/ui/map_data.js

@@ -505,6 +505,22 @@ export function uiMapData(context) {
             .append('li')
             .attr('class', 'list-item-data');
 
+        var labelEnter = liEnter
+            .append('label')
+            .call(tooltip()
+                .title(t('map_data.layers.custom.tooltip'))
+                .placement('top')
+            );
+
+        labelEnter
+            .append('input')
+            .attr('type', 'checkbox')
+            .on('change', function() { toggleLayer('data'); });
+
+        labelEnter
+            .append('span')
+            .text(t('map_data.layers.custom.title'));
+    
         liEnter
             .append('button')
             .call(tooltip()
@@ -527,22 +543,6 @@ export function uiMapData(context) {
             })
             .call(svgIcon('#iD-icon-search'));
 
-        var labelEnter = liEnter
-            .append('label')
-            .call(tooltip()
-                .title(t('map_data.layers.custom.tooltip'))
-                .placement('top')
-            );
-
-        labelEnter
-            .append('input')
-            .attr('type', 'checkbox')
-            .on('change', function() { toggleLayer('data'); });
-
-        labelEnter
-            .append('span')
-            .text(t('map_data.layers.custom.title'));
-
         // Update
         ul = ul
             .merge(ulEnter);