Fix various CSS issues

css/80_app.css

@@ -507,6 +507,14 @@ button[disabled].action {
 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
     margin-left: 10px;
 }
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
+    padding-right: 5px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
+    padding-left: 5px;
+}
 .top-toolbar .toolbar-item .item-label {
     text-align: center;
     font-size: 11px;
@@ -623,15 +631,17 @@ button.add-note svg.icon {
     border-bottom: 1px solid #ccc;
     height: 60px;
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .header h3 {
     text-align: center;
     margin-bottom: 0;
-    white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    padding: 20px;
+    padding: 0;
 }
 
 .header button,
@@ -648,20 +658,14 @@ button.add-note svg.icon {
 }
 
 .field-help-title button.close,
-.sidebar-component .header button.data-editor-close,
-.sidebar-component .header button.note-editor-close,
-.sidebar-component .header button.qa-editor-close,
-.entity-editor-pane .header button.preset-close,
+.sidebar .header button.close,
 .preset-list-pane .header button.preset-choose {
     position: absolute;
     right: 0;
     top: 0;
 }
 .ideditor[dir='rtl'] .field-help-title button.close,
-.ideditor[dir='rtl'] .sidebar-component .header button.data-editor-close,
-.ideditor[dir='rtl'] .sidebar-component .header button.note-editor-close,
-.ideditor[dir='rtl'] .sidebar-component .header button.qa-editor-close,
-.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-close,
+.ideditor[dir='rtl'] .sidebar .header button.close,
 .ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
     left: 0;
     right: auto;
@@ -719,6 +723,10 @@ button.add-note svg.icon {
     justify-content: space-between;
 }
 
+.header-block {
+    display: flex;
+    align-items: center;
+}
 .header-block-outer {
     width: 20%;
 }
@@ -726,6 +734,7 @@ button.add-note svg.icon {
 .header-block-close {
     display: flex;
     justify-content: flex-end;
+    height: 100%;
 }
 
 /* Hide/Toggle collapsable sections (aka Disclosure)
@@ -1373,12 +1382,17 @@ a.hide-toggle {
     overflow: hidden;
 }
 .field-label .label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
     flex: 1 1 auto;
     padding: 5px 0 5px 10px;
 }
 .ideditor[dir='rtl'] .field-label .label-text {
     padding: 5px 10px 5px 0;
 }
+.field-label .label-text span {
+    white-space: nowrap;
+}
 
 .label-text .label-textannotation svg.icon {
     margin: 0 8px;
@@ -4672,16 +4686,12 @@ img.tile-debug {
     padding: 20px;
     border-bottom: 1px solid #ccc;
 }
-.modal-section p:not(:last-of-type),
-.modal-section ul {
+.modal-section p:not(:last-of-type) {
     padding-bottom: 20px;
 }
 .modal-section h4 {
     padding-bottom: 0;
 }
-.modal-section.header h3 {
-    padding: 0;
-}
 .modal-section.buttons {
     text-align: center;
 }
@@ -4701,7 +4711,6 @@ img.tile-debug {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-    margin-bottom: 30px;
 }
 
 .save-section .buttons .action,
@@ -4966,6 +4975,9 @@ svg.mouseclick use.right {
 .settings-custom-background .instructions-template p {
     margin-bottom: 0;
 }
+.settings-custom-background .instructions-template ul {
+    padding-bottom: 20px;
+}
 .settings-custom-background .instructions-template ul li {
     list-style-type: disc;
     list-style-position: inside;

modules/ui/commit.js

@@ -270,7 +270,7 @@ export function uiCommit(context) {
 
         saveSection = saveSection.enter()
             .append('div')
-            .attr('class','modal-section save-section fillL cf')
+            .attr('class','modal-section save-section fillL')
             .merge(saveSection);
 
         var prose = saveSection.selectAll('.commit-info')
@@ -355,7 +355,7 @@ export function uiCommit(context) {
         // enter
         var buttonEnter = buttonSection.enter()
             .append('div')
-            .attr('class', 'buttons fillL cf');
+            .attr('class', 'buttons fillL');
 
         buttonEnter
             .append('button')

modules/ui/data_editor.js

@@ -25,7 +25,7 @@ export function uiDataEditor(context) {
 
         headerEnter
             .append('button')
-            .attr('class', 'fr data-editor-close')
+            .attr('class', 'close')
             .on('click', function() {
                 context.enter(modeBrowse(context));
             })

modules/ui/entity_editor.js

@@ -45,12 +45,12 @@ export function uiEntityEditor(context) {
 
         headerEnter
             .append('button')
-            .attr('class', 'fl preset-reset preset-choose')
+            .attr('class', 'preset-reset preset-choose')
             .call(svgIcon((localizer.textDirection() === 'rtl') ? '#iD-icon-forward' : '#iD-icon-backward'));
 
         headerEnter
             .append('button')
-            .attr('class', 'fr preset-close')
+            .attr('class', 'close')
             .on('click', function() { context.enter(modeBrowse(context)); })
             .call(svgIcon(_modified ? '#iD-icon-apply' : '#iD-icon-close'));
 

modules/ui/improveOSM_editor.js

@@ -30,7 +30,7 @@ export function uiImproveOsmEditor(context) {
 
     headerEnter
       .append('button')
-        .attr('class', 'fr qa-editor-close')
+        .attr('class', 'close')
         .on('click', () => context.enter(modeBrowse(context)))
         .call(svgIcon('#iD-icon-close'));
 

modules/ui/intro/navigation.js

@@ -356,7 +356,7 @@ export function uiIntroNavigation(context, reveal) {
     function closeTownHall() {
         if (!isTownHallSelected()) return clickTownHall();
 
-        var selector = '.entity-editor-pane button.preset-close svg use';
+        var selector = '.entity-editor-pane button.close svg use';
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
         reveal('.entity-editor-pane',
@@ -369,7 +369,7 @@ export function uiIntroNavigation(context, reveal) {
 
         context.history().on('change.intro', function() {
             // update the close icon in the tooltip if the user edits something.
-            var selector = '.entity-editor-pane button.preset-close svg use';
+            var selector = '.entity-editor-pane button.close svg use';
             var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
             reveal('.entity-editor-pane',
@@ -492,7 +492,7 @@ export function uiIntroNavigation(context, reveal) {
 
 
     function editorStreet() {
-        var selector = '.entity-editor-pane button.preset-close svg use';
+        var selector = '.entity-editor-pane button.close svg use';
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
         reveal('.entity-editor-pane',
@@ -509,7 +509,7 @@ export function uiIntroNavigation(context, reveal) {
 
         context.history().on('change.intro', function() {
             // update the close icon in the tooltip if the user edits something.
-            var selector = '.entity-editor-pane button.preset-close svg use';
+            var selector = '.entity-editor-pane button.close svg use';
             var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
             reveal('.entity-editor-pane',

modules/ui/intro/point.js

@@ -261,7 +261,7 @@ export function uiIntroPoint(context, reveal) {
         // reset pane, in case user happened to change it..
         context.container().select('.inspector-wrap .panewrap').style('right', '0%');
 
-        var selector = '.entity-editor-pane button.preset-close svg use';
+        var selector = '.entity-editor-pane button.close svg use';
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
         context.on('exit.intro', function() {

modules/ui/keepRight_editor.js

@@ -29,7 +29,7 @@ export function uiKeepRightEditor(context) {
 
     headerEnter
       .append('button')
-        .attr('class', 'fr qa-editor-close')
+        .attr('class', 'close')
         .on('click', () => context.enter(modeBrowse(context)))
         .call(svgIcon('#iD-icon-close'));
 

modules/ui/note_editor.js

@@ -46,7 +46,7 @@ export function uiNoteEditor(context) {
 
         headerEnter
             .append('button')
-            .attr('class', 'fr note-editor-close')
+            .attr('class', 'close')
             .on('click', function() {
                 context.enter(modeBrowse(context));
             })

modules/ui/osmose_editor.js

@@ -29,7 +29,7 @@ export function uiOsmoseEditor(context) {
 
     headerEnter
       .append('button')
-        .attr('class', 'fr qa-editor-close')
+        .attr('class', 'close')
         .on('click', () => context.enter(modeBrowse(context)))
         .call(svgIcon('#iD-icon-close'));
 

modules/ui/success.js

@@ -72,16 +72,16 @@ export function uiSuccess(context) {
       .append('div')
       .attr('class', 'header fillL');
 
-    header
-      .append('button')
-      .attr('class', 'fr')
-      .on('click', () => dispatch.call('cancel'))
-      .call(svgIcon('#iD-icon-close'));
-
     header
       .append('h3')
       .text(t('success.just_edited'));
 
+    header
+      .append('button')
+      .attr('class', 'close')
+      .on('click', () => dispatch.call('cancel'))
+      .call(svgIcon('#iD-icon-close'));
+
     let body = selection
       .append('div')
       .attr('class', 'body save-success fillL');