From e6703cb1cc2d51c7c99e4fbe76bbe37ea75b5032 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Wed, 9 Sep 2020 16:11:46 -0400
Subject: [PATCH 1/8] Begin making UI adapt correctly to scaled text sizes (re:
 #7965)

---
 css/80_app.css                 | 59 +++++++++++++---------------------
 modules/ui/field_help.js       | 14 ++++----
 modules/ui/intro/area.js       |  2 +-
 modules/ui/intro/building.js   |  4 +--
 modules/ui/intro/helper.js     | 56 ++++++++++++++++----------------
 modules/ui/intro/line.js       |  2 +-
 modules/ui/intro/navigation.js |  8 ++---
 modules/ui/intro/point.js      |  4 +--
 8 files changed, 68 insertions(+), 81 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 173c4314b..f8fe9d8c6 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -172,8 +172,7 @@ input[type=email] {
     background-color: #fff;
     color: #333;
     border: 1px solid #ccc;
-    padding: 5px 20px 5px 10px;
-    height: 30px;
+    padding: 0px 20px 0px 10px;
     border-radius: 4px;
     text-overflow: ellipsis;
     overflow: auto;
@@ -204,16 +203,14 @@ input.disabled {
 
 input[type="checkbox"],
 input[type="radio"] {
-    float: left;
     width: 14px;
     height: 14px;
     margin-right: 5px;
-    margin-top: 3px;
     cursor: pointer;
+    vertical-align: middle;
 }
 .ideditor[dir='rtl'] input[type="checkbox"],
 .ideditor[dir='rtl'] input[type="radio"] {
-    float: right;
     margin-left: 5px;
     margin-right: 0;
 }
@@ -303,14 +300,12 @@ li.hide {
 ------------------------------------------------------- */
 button {
     text-align: center;
-    line-height: 20px;
     border: 0;
     background: #fff;
     font-weight: bold;
     color: #333;
     font-size: 12px;
     display: inline-block;
-    height: 40px;
     border-radius: 4px;
 }
 
@@ -402,7 +397,7 @@ button[disabled].action {
 /* Icons
 ------------------------------------------------------- */
 .icon {
-    vertical-align: top;
+    vertical-align: middle;
     width: 20px;
     height: 20px;
 }
@@ -423,8 +418,9 @@ button.disabled .icon.operation use,
 
 .icon.inline {
     vertical-align: text-top;
-    width: 14px;
-    height: 14px;
+    display: inline-block;
+    width: 1.17em;
+    height: 1.17em;
     margin: 0px 3px;
 }
 
@@ -578,7 +574,7 @@ button.save .count {
     text-align: center;
 }
 
-.help-pane svg.icon.pre-text.add-note,
+.help-pane svg.icon.inline.add-note,
 button.add-note svg.icon {
     height: 15px;
     width: 15px;
@@ -595,7 +591,7 @@ button.add-note svg.icon {
     margin-left: 4px;
     margin-right: unset;
 }
-.help-pane svg.icon.pre-text.add-note {
+.help-pane svg.icon.inline.add-note {
     margin-left: 3px;
     margin-right: 3px;
 }
@@ -937,7 +933,6 @@ a.hide-toggle {
     background-color: #ccc;
     margin: 30px auto;
     padding: 5px;
-    height: auto;
     min-height: 40px;
 }
 
@@ -1382,7 +1377,6 @@ a.hide-toggle {
     display: flex;
     flex-flow: row nowrap;
     flex: 1 1 100%;
-    height: 30px;
     position: relative;
     font-weight: bold;
     color: #333;
@@ -1395,10 +1389,10 @@ a.hide-toggle {
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1 1 auto;
-    padding: 5px 0 5px 10px;
+    padding: 5px 0 4px 10px;
 }
 .ideditor[dir='rtl'] .field-label .label-text {
-    padding: 5px 10px 5px 0;
+    padding: 5px 10px 4px 0;
 }
 .field-label .label-text span {
     white-space: nowrap;
@@ -1435,6 +1429,7 @@ a.hide-toggle {
 }
 .field-label .icon {
     opacity: .5;
+
 }
 
 .field-label .modified-icon,
@@ -1484,7 +1479,6 @@ a.hide-toggle {
 /* Buttons inside fields */
 .form-field-button {
     flex: 0 0 auto;
-    height: 30px;
     width: 32px;
     position: relative;
     background-color: #fff;
@@ -1816,9 +1810,9 @@ a.hide-toggle {
     flex: 1 1 auto;
     display: flex;
     flex-flow: row nowrap;
+    align-items: center;
     width: 100%;
     padding: 5px 10px;
-    height: 30px;
     background-color: #fff;
     color: #7092ff;
     cursor: pointer;
@@ -2189,7 +2183,7 @@ div.combobox {
 .combobox-caret {
     display: inline-block;
     position: relative;
-    height: 30px;
+    height: 100%;
     width: 30px !important;
     margin-left: -30px;
     vertical-align: top;
@@ -2344,7 +2338,6 @@ div.combobox {
 }
 
 .form-field-input-wrap .label {
-    height: 30px;
     background: #f6f6f6;
     padding: 5px 10px;
 }
@@ -2431,7 +2424,6 @@ button.raw-tag-option svg.icon {
 }
 
 .tag-row input {
-    height: 31px;
     border: 0;
     border-radius: 0;
     border-bottom: 1px solid #ccc;
@@ -2469,8 +2461,7 @@ button.raw-tag-option svg.icon {
     border-top: 1px solid #ccc;
 }
 .tag-row button {
-    flex: 0 0 32px;
-    height: 31px;
+    flex: 0 0 auto;
     width: 32px;
     border: 1px solid #ccc;
     border-top-width: 0;
@@ -2939,9 +2930,13 @@ input.key-trap {
     right: auto;
 }
 
+.map-control {
+    position: relative;
+}
 .map-control > button {
     position: relative;
     width: 40px;
+    height: 40px;
     background: rgba(0,0,0,.5);
     border-radius: 0;
     pointer-events: auto;
@@ -3045,11 +3040,6 @@ div.full-screen > button:active {
 
 /* Background / Map Data Settings
 ------------------------------------------------------- */
-.map-data-control,
-.background-control {
-    position: relative;
-}
-
 .imagery-faq {
     margin-bottom: 10px;
     white-space: nowrap;
@@ -3062,7 +3052,6 @@ div.full-screen > button:active {
 }
 
 .layer-list > li {
-    height: 30px;
     background-color: #fff;
     color: #7092ff;
     position: relative;
@@ -3121,6 +3110,7 @@ div.full-screen > button:active {
     cursor: pointer;
     flex: 1 1 auto;
     display: flex;
+    align-items: center;
     overflow: hidden;
 }
 
@@ -3141,7 +3131,6 @@ div.full-screen > button:active {
 
 .map-data-pane .layer-list button,
 .background-pane .layer-list button {
-    height: 100%;
     border-left: 1px solid #ccc;
     border-radius: 0;
     padding-left: 4px;
@@ -3637,6 +3626,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     float: left;
     display: block;
     width: 20%;
+    height: 40px;
     position: relative;
     background-color: transparent;
 }
@@ -3728,7 +3718,6 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     flex-flow: row nowrap;
     justify-content: space-between;
     border-bottom: 1px solid #ccc;
-    height: 60px;
 }
 
 .pane-heading h2 {
@@ -3737,7 +3726,6 @@ li.issue-fix-item:not(.actionable) .fix-icon {
 
 .pane-heading button {
     width: 40px;
-    height: 100%;
     border-radius: 0;
 }
 
@@ -3764,11 +3752,11 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     margin-bottom: 20px;
 }
 
-.help-pane .left-content .icon.pre-text {
-    vertical-align: text-top;
+.help-pane .left-content .icon.inline {
     margin-right: 0;
     margin-left: 0;
-    display: inline-block;
+    height: 1.34em;
+    width: 1.34em;
 }
 
 .help-pane .toc {
@@ -5606,7 +5594,6 @@ li.hide + li.version .badge .tooltip .popover-arrow {
 
 .huge-modal-button {
     width: 100%;
-    height: auto;
     padding: 20px;
 }
 
diff --git a/modules/ui/field_help.js b/modules/ui/field_help.js
index 4581d2b0f..ba8b0e9b7 100644
--- a/modules/ui/field_help.js
+++ b/modules/ui/field_help.js
@@ -57,13 +57,13 @@ export function uiFieldHelp(context, fieldName) {
     var replacements = {
         distField: t('restriction.controls.distance'),
         viaField: t('restriction.controls.via'),
-        fromShadow: icon('#iD-turn-shadow', 'pre-text shadow from'),
-        allowShadow: icon('#iD-turn-shadow', 'pre-text shadow allow'),
-        restrictShadow: icon('#iD-turn-shadow', 'pre-text shadow restrict'),
-        onlyShadow: icon('#iD-turn-shadow', 'pre-text shadow only'),
-        allowTurn: icon('#iD-turn-yes', 'pre-text turn'),
-        restrictTurn: icon('#iD-turn-no', 'pre-text turn'),
-        onlyTurn: icon('#iD-turn-only', 'pre-text turn')
+        fromShadow: icon('#iD-turn-shadow', 'inline shadow from'),
+        allowShadow: icon('#iD-turn-shadow', 'inline shadow allow'),
+        restrictShadow: icon('#iD-turn-shadow', 'inline shadow restrict'),
+        onlyShadow: icon('#iD-turn-shadow', 'inline shadow only'),
+        allowTurn: icon('#iD-turn-yes', 'inline turn'),
+        restrictTurn: icon('#iD-turn-no', 'inline turn'),
+        onlyTurn: icon('#iD-turn-only', 'inline turn')
     };
 
 
diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js
index 2eabd6b67..8aa539126 100644
--- a/modules/ui/intro/area.js
+++ b/modules/ui/intro/area.js
@@ -436,7 +436,7 @@ export function uiIntroArea(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            helpString('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'pre-text') }),
+            helpString('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'inline') }),
             { duration: 300 }
         );
 
diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js
index 226127b33..989c70ee1 100644
--- a/modules/ui/intro/building.js
+++ b/modules/ui/intro/building.js
@@ -300,7 +300,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'pre-text') })
+                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 
@@ -628,7 +628,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'pre-text') })
+                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index 33cb589db..5094dffc9 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -51,34 +51,34 @@ export function helpString(id, replacements) {
     // only load these the first time
     if (!helpStringReplacements) helpStringReplacements = {
         // insert icons corresponding to various UI elements
-        point_icon: icon('#iD-icon-point', 'pre-text'),
-        line_icon: icon('#iD-icon-line', 'pre-text'),
-        area_icon: icon('#iD-icon-area', 'pre-text'),
-        note_icon: icon('#iD-icon-note', 'pre-text add-note'),
-        plus: icon('#iD-icon-plus', 'pre-text'),
-        minus: icon('#iD-icon-minus', 'pre-text'),
-        move_icon: icon('#iD-operation-move', 'pre-text operation'),
-        merge_icon: icon('#iD-operation-merge', 'pre-text operation'),
-        delete_icon: icon('#iD-operation-delete', 'pre-text operation'),
-        circularize_icon: icon('#iD-operation-circularize', 'pre-text operation'),
-        split_icon: icon('#iD-operation-split', 'pre-text operation'),
-        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text operation'),
-        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text operation'),
-        layers_icon: icon('#iD-icon-layers', 'pre-text'),
-        data_icon: icon('#iD-icon-data', 'pre-text'),
-        inspect: icon('#iD-icon-inspect', 'pre-text'),
-        help_icon: icon('#iD-icon-help', 'pre-text'),
-        undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
-        redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
-        save_icon: icon('#iD-icon-save', 'pre-text'),
-        leftclick: icon('#iD-walkthrough-mouse-left', 'pre-text operation'),
-        rightclick: icon('#iD-walkthrough-mouse-right', 'pre-text operation'),
-        mousewheel_icon: icon('#iD-walkthrough-mousewheel', 'pre-text operation'),
-        tap_icon: icon('#iD-walkthrough-tap', 'pre-text operation'),
-        doubletap_icon: icon('#iD-walkthrough-doubletap', 'pre-text operation'),
-        longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
-        touchdrag_icon: icon('#iD-walkthrough-touchdrag', 'pre-text operation'),
-        pinch_icon: icon('#iD-walkthrough-pinch-apart', 'pre-text operation'),
+        point_icon: icon('#iD-icon-point', 'inline'),
+        line_icon: icon('#iD-icon-line', 'inline'),
+        area_icon: icon('#iD-icon-area', 'inline'),
+        note_icon: icon('#iD-icon-note', 'inline add-note'),
+        plus: icon('#iD-icon-plus', 'inline'),
+        minus: icon('#iD-icon-minus', 'inline'),
+        move_icon: icon('#iD-operation-move', 'inline operation'),
+        merge_icon: icon('#iD-operation-merge', 'inline operation'),
+        delete_icon: icon('#iD-operation-delete', 'inline operation'),
+        circularize_icon: icon('#iD-operation-circularize', 'inline operation'),
+        split_icon: icon('#iD-operation-split', 'inline operation'),
+        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'inline operation'),
+        disconnect_icon: icon('#iD-operation-disconnect', 'inline operation'),
+        layers_icon: icon('#iD-icon-layers', 'inline'),
+        data_icon: icon('#iD-icon-data', 'inline'),
+        inspect: icon('#iD-icon-inspect', 'inline'),
+        help_icon: icon('#iD-icon-help', 'inline'),
+        undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'inline'),
+        redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'inline'),
+        save_icon: icon('#iD-icon-save', 'inline'),
+        leftclick: icon('#iD-walkthrough-mouse-left', 'inline operation'),
+        rightclick: icon('#iD-walkthrough-mouse-right', 'inline operation'),
+        mousewheel_icon: icon('#iD-walkthrough-mousewheel', 'inline operation'),
+        tap_icon: icon('#iD-walkthrough-tap', 'inline operation'),
+        doubletap_icon: icon('#iD-walkthrough-doubletap', 'inline operation'),
+        longpress_icon: icon('#iD-walkthrough-longpress', 'inline operation'),
+        touchdrag_icon: icon('#iD-walkthrough-touchdrag', 'inline operation'),
+        pinch_icon: icon('#iD-walkthrough-pinch-apart', 'inline operation'),
 
         // insert keys; may be localized and platform-dependent
         shift: uiCmd.display('⇧'),
diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js
index 72fcb0ac2..72340fa9c 100644
--- a/modules/ui/intro/line.js
+++ b/modules/ui/intro/line.js
@@ -338,7 +338,7 @@ export function uiIntroLine(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.lines.name_road', { button: icon('#iD-icon-close', 'pre-text') }),
+                helpString('intro.lines.name_road', { button: icon('#iD-icon-close', 'inline') }),
                 { tooltipClass: 'intro-lines-name_road' }
             );
         }, 500);
diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js
index 87ee5828e..cf1eae098 100644
--- a/modules/ui/intro/navigation.js
+++ b/modules/ui/intro/navigation.js
@@ -356,7 +356,7 @@ export function uiIntroNavigation(context, reveal) {
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
         reveal('.entity-editor-pane',
-            helpString('intro.navigation.close_townhall', { button: icon(href, 'pre-text') })
+            helpString('intro.navigation.close_townhall', { button: icon(href, 'inline') })
         );
 
         context.on('exit.intro', function() {
@@ -369,7 +369,7 @@ export function uiIntroNavigation(context, reveal) {
             var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
             reveal('.entity-editor-pane',
-                helpString('intro.navigation.close_townhall', { button: icon(href, 'pre-text') }),
+                helpString('intro.navigation.close_townhall', { button: icon(href, 'inline') }),
                 { duration: 0 }
             );
         });
@@ -493,7 +493,7 @@ export function uiIntroNavigation(context, reveal) {
 
         reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
             helpString('intro.navigation.editor_street', {
-                button: icon(href, 'pre-text'),
+                button: icon(href, 'inline'),
                 field1: onewayField.label(),
                 field2: maxspeedField.label()
             }));
@@ -509,7 +509,7 @@ export function uiIntroNavigation(context, reveal) {
 
             reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
                 helpString('intro.navigation.editor_street', {
-                    button: icon(href, 'pre-text'),
+                    button: icon(href, 'inline'),
                     field1: onewayField.label(),
                     field2: maxspeedField.label()
                 }), { duration: 0 }
diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js
index 8aa6fe53a..19c871320 100644
--- a/modules/ui/intro/point.js
+++ b/modules/ui/intro/point.js
@@ -254,7 +254,7 @@ export function uiIntroPoint(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            helpString('intro.points.add_close', { button: icon(href, 'pre-text') })
+            helpString('intro.points.add_close', { button: icon(href, 'inline') })
         );
 
         function continueTo(nextStep) {
@@ -351,7 +351,7 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.points.update_close', { button: icon('#iD-icon-close', 'pre-text') })
+                helpString('intro.points.update_close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 

From b980e47c3cdbb9f27b878b9e91dd202e67db258d Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Thu, 10 Sep 2020 11:15:24 -0400
Subject: [PATCH 2/8] Continue making the UI responsive to text zoom (re:
 #7965)

---
 css/80_app.css             |  68 +++++++++----------
 modules/ui/feature_list.js |   6 +-
 modules/ui/init.js         | 133 ++++++++++++++++++-------------------
 modules/ui/preset_list.js  |   6 +-
 4 files changed, 106 insertions(+), 107 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index f8fe9d8c6..141973a8a 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -33,6 +33,8 @@
 
 .main-content {
     position: relative;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
     height: 100%;
     touch-action: none;
@@ -467,10 +469,7 @@ button.disabled .icon.operation use,
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
 .top-toolbar-wrap {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
+    position: relative;
     z-index: 101;
 }
 .top-toolbar {
@@ -748,9 +747,10 @@ button.add-note svg.icon {
 /* Hide/Toggle collapsible sections (aka Disclosure)
 ------------------------------------------------------- */
 .hide-toggle .icon.pre-text {
-    vertical-align: text-top;
+    vertical-align: middle;
     width: 16px;
     height: 16px;
+    margin-top: -3px;
     margin-left: -3px;
 }
 .ideditor[dir='rtl'] .hide-toggle .icon.pre-text {
@@ -882,11 +882,15 @@ a.hide-toggle {
     margin-bottom: 150px;
 }
 
+.sidebar .search-header {
+    position: relative;
+    overflow: hidden;
+}
 .sidebar .search-header .icon {
-    display: block;
+    display: inline-block;
     position: absolute;
     left: 10px;
-    top: 80px;
+    height: 100%;
     pointer-events: none;
 }
 .ideditor[dir='rtl'] .sidebar .search-header .icon {
@@ -895,11 +899,8 @@ a.hide-toggle {
 }
 
 .sidebar .search-header input {
-    position: absolute;
-    top: 60px;
-    height: 60px;
     width: 100%;
-    padding: 5px 10px;
+    padding: 10px 10px;
     border-radius: 0;
     border-width: 0;
     border-bottom-width: 1px;
@@ -1034,7 +1035,7 @@ a.hide-toggle {
 }
 
 .preset-list-button-wrap {
-    height: 62px;
+    min-height: 62px;
     display: flex;
     border: 1px solid #ccc;
     border-radius: 4px;
@@ -1045,6 +1046,7 @@ a.hide-toggle {
     height: 100%;
     position: relative;
     display: flex;
+    align-items: center;
 }
 
 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
@@ -1240,7 +1242,6 @@ a.hide-toggle {
 }
 
 .preset-list-button-wrap button.tag-reference-button {
-    height: 100%;
     width: 32px;
     flex: 0 0 auto;
     background: #f6f6f6;
@@ -1268,6 +1269,9 @@ a.hide-toggle {
 .preset-list-button-wrap button.tag-reference-button .icon {
     opacity: .5;
 }
+.preset-list-button-wrap .accessory-buttons {
+    display: flex;
+}
 
 
 .current .preset-list-button,
@@ -1449,7 +1453,6 @@ a.hide-toggle {
     flex-flow: row nowrap;
     width: 100%;
     flex: 1 1 auto;
-    min-height: 30px;
     border-top: 0;
     border-radius: 0 0 4px 4px;
 }
@@ -1463,17 +1466,14 @@ a.hide-toggle {
 .form-field-input-wrap > textarea,
 .form-field-input-wrap > ul.chiplist {
     flex: 1 1 auto;
-    min-height: 30px;
     border: 1px solid #ccc;
     border-top: 0;
     border-radius: 0;
-    overflow: hidden;
     position: relative;
 }
 .form-field-input-wrap > textarea {
     height: 65px;
     border-radius: 0 0 4px 4px;
-    overflow: auto;
 }
 
 /* Buttons inside fields */
@@ -1670,7 +1670,6 @@ a.hide-toggle {
 .form-field-input-multicombo .input-wrap {
     border: 1px solid #ddd;
     width: 100px;
-    height: 31px;
 }
 .form-field-input-multicombo input {
     border: none;
@@ -1757,7 +1756,6 @@ a.hide-toggle {
 }
 .form-field-input-check > input[type="checkbox"] {
     flex: 0 1 auto;
-    min-height: 20px;
     width: 20px;
     margin-top: 0;
 }
@@ -1959,7 +1957,6 @@ a.hide-toggle {
     flex: 1 1 auto;
     display: flex;
     width: 100%;
-    min-height: 30px;
 }
 
 .addr-row > input {
@@ -2888,11 +2885,8 @@ input.key-trap {
 
 
 .over-map {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 71px;
-    bottom: 30px;
+    position: relative;
+    height: 100%;
     pointer-events: none;
     display: flex;
     flex-direction: row-reverse;
@@ -3607,7 +3601,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
 
 .nudge-container input {
     width: 100%;
-    height: 20px;
+    padding: 2px;
     text-align: center;
     border: 0;
 }
@@ -4038,9 +4032,14 @@ img.tile-debug {
 /* Map
 ------------------------------------------------------- */
 .main-map {
-    position: relative;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     overflow: hidden;
     height: 100%;
+    width: 100%;
     background: #000;
     user-select: none;
     touch-action: none;
@@ -4273,14 +4272,13 @@ img.tile-debug {
 ------------------------------------------------------- */
 .map-footer {
     width: 100%;
-    position: absolute;
-    right: 0;
-    bottom: 0;
+    position: relative;
     border-radius: 0;
     pointer-events: none;
     display: flex;
     flex-direction: column;
     -ms-user-select: element;
+    flex: 0 0 auto;
 }
 
 .map-footer-bar {
@@ -4316,8 +4314,9 @@ img.tile-debug {
 ------------------------------------------------------- */
 .attribution-wrap {
     width: 100%;
+    position: absolute;
     height: 20px;
-    margin-bottom: 5px;
+    top: -25px;
 }
 
 .attribution-wrap * { pointer-events: all; }
@@ -4409,7 +4408,6 @@ img.tile-debug {
 .map-footer-bar .scale-block {
     vertical-align: bottom;
     width: 250px;
-    max-height: 30px;
     flex: 0 0 250px;
     user-select: none;
 }
@@ -4443,7 +4441,6 @@ img.tile-debug {
 /* Footer - About, Source Switcher
 ------------------------------------------------------- */
 .map-footer-bar .info-block {
-    max-height: 30px;
     flex: 1 1 auto;
 }
 
@@ -4541,6 +4538,9 @@ img.tile-debug {
 .ideditor[dir='rtl'] .api-status {
     text-align: left;
 }
+.api-status:empty {
+    display: none;
+}
 
 .api-status.offline,
 .api-status.readonly,
@@ -5113,7 +5113,7 @@ img.tile-debug {
 .notice .zoom-to {
     margin: auto;
     width: 300px;
-    height: 70px;
+    padding: 20px 5px;
     font-size: 150%;
     border-radius: 8px;
 }
diff --git a/modules/ui/feature_list.js b/modules/ui/feature_list.js
index 2309dd6e8..a30253d6b 100644
--- a/modules/ui/feature_list.js
+++ b/modules/ui/feature_list.js
@@ -41,6 +41,9 @@ export function uiFeatureList(context) {
             .append('div')
             .attr('class', 'search-header');
 
+        searchWrap
+            .call(svgIcon('#iD-icon-search', 'pre-text'));
+
         var search = searchWrap
             .append('input')
             .attr('placeholder', t('inspector.search'))
@@ -50,9 +53,6 @@ export function uiFeatureList(context) {
             .on('keydown', keydown)
             .on('input', inputevent);
 
-        searchWrap
-            .call(svgIcon('#iD-icon-search', 'pre-text'));
-
         var listWrap = selection
             .append('div')
             .attr('class', 'inspector-body');
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 9b8e68967..5c123b717 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -162,6 +162,72 @@ export function uiInit(context) {
             .attr('class', 'spinner')
             .call(uiSpinner(context));
 
+        var overMap = content
+            .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);
+        });
+
+        ui.info = uiInfo(context);
+
+        // Add absolutely-positioned elements that sit on top of the map
+        // This should happen after the map is ready (center/zoom)
+        overMap
+            .call(uiMapInMap(context))
+            .call(ui.info)
+            .call(uiNotice(context));
+
+
+        overMap
+            .append('div')
+            .attr('class', 'photoviewer')
+            .classed('al', true)       // 'al'=left,  'ar'=right
+            .classed('hide', true)
+            .call(ui.photoviewer);
+
+
         // Add attribution and footer
         var about = content
             .append('div')
@@ -270,73 +336,6 @@ export function uiInit(context) {
             map.centerZoom([0, 0], 2);
         }
 
-
-        var overMap = content
-            .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);
-        });
-
-        ui.info = uiInfo(context);
-
-        // Add absolutely-positioned elements that sit on top of the map
-        // This should happen after the map is ready (center/zoom)
-        overMap
-            .call(uiMapInMap(context))
-            .call(ui.info)
-            .call(uiNotice(context));
-
-
-        overMap
-            .append('div')
-            .attr('class', 'photoviewer')
-            .classed('al', true)       // 'al'=left,  'ar'=right
-            .classed('hide', true)
-            .call(ui.photoviewer);
-
-
         // Bind events
         window.onbeforeunload = function() {
             return context.save();
diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js
index 790b7f59f..3616f09c0 100644
--- a/modules/ui/preset_list.js
+++ b/modules/ui/preset_list.js
@@ -117,6 +117,9 @@ export function uiPresetList(context) {
             .append('div')
             .attr('class', 'search-header');
 
+        searchWrap
+            .call(svgIcon('#iD-icon-search', 'pre-text'));
+
         var search = searchWrap
             .append('input')
             .attr('class', 'preset-search-input')
@@ -127,9 +130,6 @@ export function uiPresetList(context) {
             .on('keypress', keypress)
             .on('input', inputevent);
 
-        searchWrap
-            .call(svgIcon('#iD-icon-search', 'pre-text'));
-
         if (_autofocus) {
             search.node().focus();
         }

From 42efdf29f1fc095b02baa6fd4f807e0972df982d Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Thu, 10 Sep 2020 15:03:18 -0400
Subject: [PATCH 3/8] More progress on #7965

---
 css/80_app.css             | 108 ++++++++++++++++++++-----------------
 modules/ui/fields/check.js |   2 +-
 2 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 141973a8a..0b39da814 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -156,14 +156,6 @@ code {
 
 /* Forms
 ------------------------------------------------------- */
-textarea  {
-    resize: vertical;
-    font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
-        "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-        "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
-        sans-serif;
-}
-
 textarea,
 input[type=text],
 input[type=search],
@@ -174,19 +166,20 @@ input[type=email] {
     background-color: #fff;
     color: #333;
     border: 1px solid #ccc;
-    padding: 0px 20px 0px 10px;
+    padding: 0px 10px 0px 10px;
     border-radius: 4px;
     text-overflow: ellipsis;
     overflow: auto;
 }
-.ideditor[dir='rtl'] textarea,
-.ideditor[dir='rtl'] input[type=text],
-.ideditor[dir='rtl'] input[type=search],
-.ideditor[dir='rtl'] input[type=number],
-.ideditor[dir='rtl'] input[type=url],
-.ideditor[dir='rtl'] input[type=tel],
-.ideditor[dir='rtl'] input[type=email] {
-    padding: 5px 10px 5px 20px;
+
+textarea  {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    resize: vertical;
+    font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
+        "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+        "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+        sans-serif;
 }
 
 textarea:active,
@@ -380,6 +373,11 @@ button[disabled].action {
     cursor: not-allowed;
 }
 
+button.action,
+button.secondary-action {
+    padding: 10px 5px;
+}
+
 @media (hover: hover) {
     button.action:hover {
         background: #597be7;
@@ -634,11 +632,12 @@ button.add-note svg.icon {
 ------------------------------------------------------- */
 .header {
     border-bottom: 1px solid #ccc;
-    height: 60px;
+    padding: 20px 40px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
+    flex: 0 0 auto;
 }
 
 .header h3 {
@@ -837,6 +836,8 @@ a.hide-toggle {
     width: 50%;
     top: 0;
     bottom: 30px;
+    display: flex;
+    flex-direction: column;
 }
 
 .pane:first-child {
@@ -846,6 +847,11 @@ a.hide-toggle {
 .pane:last-child {
     right: 0;
 }
+.feature-list-pane {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
 
 .inspector-wrap {
     width: 100%;
@@ -861,18 +867,9 @@ a.hide-toggle {
 .inspector-body {
     overflow-y: scroll;
     overflow-x: hidden;
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-}
-
-.feature-list-pane .inspector-body,
-.preset-list-pane .inspector-body {
-    top: 120px;
-}
-.entity-editor-pane .inspector-body {
-    top: 60px;
+    position: relative;
+    height: 100%;
+    flex: 1 1 100%;
 }
 .entity-editor {
     padding: 20px;
@@ -885,6 +882,7 @@ a.hide-toggle {
 .sidebar .search-header {
     position: relative;
     overflow: hidden;
+    flex: 0 0 auto;
 }
 .sidebar .search-header .icon {
     display: inline-block;
@@ -952,8 +950,6 @@ a.hide-toggle {
 .feature-list-item {
     background-color: #fff;
     font-weight: bold;
-    height: 40px;
-    line-height: 20px;
     display: flex;
 }
 .feature-list-item:active {
@@ -1765,20 +1761,20 @@ a.hide-toggle {
 .form-field-input-check > span.mixed {
     font-style: italic;
 }
-.form-field-input-check > .reverser.button {
+.form-field-input-check > .reverser {
     flex: 0 1 auto;
     background-color: #eff2f7;
     border: 1px solid #ccd5e3;
     border-radius: 2px;
     padding: 0px 8px;
 }
-.ideditor[dir='ltr'] .form-field-input-check > .reverser.button {
+.ideditor[dir='ltr'] .form-field-input-check > .reverser {
     padding-right: 2px;
 }
-.ideditor[dir='rtl'] .form-field-input-check > .reverser.button {
+.ideditor[dir='rtl'] .form-field-input-check > .reverser {
     padding-left: 2px;
 }
-.form-field-input-check > .reverser.button.hide {
+.form-field-input-check > .reverser.hide {
     display: none;
 }
 .form-field-input-check:active {
@@ -2140,6 +2136,16 @@ a.hide-toggle {
 
 /* Field - Combobox
 ------------------------------------------------------- */
+.ideditor[dir='ltr'] textarea.combobox-input,
+.ideditor[dir='ltr'] input.combobox-input {
+    /* leave room for the caret */
+    padding-right: 20px;
+}
+.ideditor[dir='rtl'] textarea.combobox-input,
+.ideditor[dir='rtl'] input.combobox-input {
+    padding-left: 20px;
+}
+
 div.combobox {
     z-index: 9999;
     display: none;
@@ -2926,6 +2932,8 @@ input.key-trap {
 
 .map-control {
     position: relative;
+    display: flex;
+    flex-direction: column;
 }
 .map-control > button {
     position: relative;
@@ -3746,7 +3754,8 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     margin-bottom: 20px;
 }
 
-.help-pane .left-content .icon.inline {
+.help-pane .left-content .icon.inline,
+.curtain-tooltip .icon.inline {
     margin-right: 0;
     margin-left: 0;
     height: 1.34em;
@@ -4200,11 +4209,12 @@ img.tile-debug {
 
 .panel-title {
     padding: 5px 10px;
+    display: flex;
+    justify-content: space-between;
 }
 
 .panel-title button.close {
-    float: right;
-    height: 20px;
+    padding: 2px;
     background: none;
     color: #ddd;
 }
@@ -4284,7 +4294,8 @@ img.tile-debug {
 .map-footer-bar {
     pointer-events: all;
     display: block;
-    height: 30px;
+    height: 2.5em;
+    position: relative;
 }
 
 .main-footer-wrap,
@@ -4293,7 +4304,7 @@ img.tile-debug {
     flex: 0 0 100%;
     flex-flow: row nowrap;
     justify-content: space-between;
-    max-height: 30px;
+    height: 100%;
     position: absolute;
     right: 0;
     left: 0;
@@ -4305,7 +4316,7 @@ img.tile-debug {
 }
 
 .footer-hide {
-    bottom: -35px;
+    bottom: -100%;
     transition: bottom 75ms linear;
 }
 
@@ -4372,7 +4383,6 @@ img.tile-debug {
     flex-flow: row nowrap;
     align-items: center;
     padding: 2px;
-    height: 30px;
 }
 
 .flash-icon {
@@ -4447,21 +4457,23 @@ img.tile-debug {
 .map-footer-list {
     text-align: right;
     margin-right: 10px;
-    clear: right;
-    overflow: hidden;
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    position: relative;
+    height: 100%;
 }
 .ideditor[dir='rtl'] .map-footer-list {
     text-align: left;
-    clear: left;
     margin-left: 10px;
     margin-right: 0;
 }
 
 .map-footer-list li {
-    float: right;
     border-left: 1px solid rgba(255,255,255,.5);
     padding: 5px 0 5px 5px;
     margin-left: 5px;
+    height: 100%;
 }
 .ideditor[dir='rtl'] .map-footer-list li {
     float: left;
@@ -4492,7 +4504,7 @@ img.tile-debug {
 .map-footer-list a.chip .icon {
     width: 14px;
     height: 14px;
-    margin-top: 3px;
+    margin-top: -2px;
 }
 .ideditor[dir='ltr'] .map-footer-list a.chip .icon,
 .ideditor[dir='ltr'] .map-footer-list a.chip span {
diff --git a/modules/ui/fields/check.js b/modules/ui/fields/check.js
index b3b4ab3bb..8e0342fea 100644
--- a/modules/ui/fields/check.js
+++ b/modules/ui/fields/check.js
@@ -114,7 +114,7 @@ export function uiFieldCheck(field, context) {
         if (field.type === 'onewayCheck') {
             enter
                 .append('a')
-                .attr('class', 'reverser button' + (reverserHidden() ? ' hide' : ''))
+                .attr('class', 'reverser' + (reverserHidden() ? ' hide' : ''))
                 .attr('href', '#')
                 .append('span')
                 .attr('class', 'reverser-span');

From 046794214f4bff2926bb5d6f3e3a547fc258cdef Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Fri, 11 Sep 2020 11:09:38 -0400
Subject: [PATCH 4/8] Further progress on #7965

---
 css/00_reset.css   |   8 ++-
 css/80_app.css     | 119 +++++++++++++++++++++++----------------------
 modules/ui/init.js |  46 ++++++++++--------
 3 files changed, 92 insertions(+), 81 deletions(-)

diff --git a/css/00_reset.css b/css/00_reset.css
index 67891a93a..d65951dbf 100644
--- a/css/00_reset.css
+++ b/css/00_reset.css
@@ -67,13 +67,17 @@ textarea {
 
 button,
 input {
-    line-height: normal;
+    line-height: inherit;
+	letter-spacing: inherit;
 }
 
 /* Hide default number spinner controls */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-display: none;
+	display: none;
+}
+input[type=number] {
+    -moz-appearance: textfield;
 }
 
 /*
diff --git a/css/80_app.css b/css/80_app.css
index 0b39da814..f01017cba 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -137,8 +137,8 @@ kbd {
     text-align: center;
     padding: 3px 5px;
     font-size: 11px;
-    line-height: 12px;
-    min-width: 12px;
+    line-height: 1.3;
+    min-width: 0.9em;
     vertical-align: baseline;
     background-color: #fcfcfc;
     border: solid 1px #ccc;
@@ -171,7 +171,15 @@ input[type=email] {
     text-overflow: ellipsis;
     overflow: auto;
 }
-
+input[type=text],
+input[type=search],
+input[type=number],
+input[type=url],
+input[type=tel],
+input[type=email] {
+    /* need this since line-height interpretation may vary by font or browser */
+    height: 2.585em;
+}
 textarea  {
     padding-top: 5px;
     padding-bottom: 5px;
@@ -597,11 +605,13 @@ button.add-note svg.icon {
     opacity: .5;
     position: absolute;
     right: 4px;
-    bottom: 26px;
-}
-.spinner img {
+    bottom: 4px;
     height: 20px;
     width: 20px;
+}
+.spinner img {
+    height: 100%;
+    width: 100%;
     background: transparent;
     border-radius: 100%;
 }
@@ -711,7 +721,7 @@ button.add-note svg.icon {
     border-top: 1px solid #ccc;
     background-color: #f6f6f6;
     width: 100%;
-    height: 30px;
+    height: 2.5em;
     z-index: 1;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -814,14 +824,15 @@ a.hide-toggle {
     left: 0;
     bottom: 0;
     right: 0;
+    display: flex;
+    flex-direction: column;
 }
 
 .sidebar-component .body {
     width: 100%;
+    height: 100%;
     overflow: auto;
-    top: 60px;
-    bottom: 0;
-    position: absolute;
+    position: relative;
 }
 
 .panewrap {
@@ -835,7 +846,7 @@ a.hide-toggle {
     position: absolute;
     width: 50%;
     top: 0;
-    bottom: 30px;
+    bottom: 2.5em;
     display: flex;
     flex-direction: column;
 }
@@ -898,7 +909,8 @@ a.hide-toggle {
 
 .sidebar .search-header input {
     width: 100%;
-    padding: 10px 10px;
+    padding: 0 10px;
+    height: 3em;
     border-radius: 0;
     border-width: 0;
     border-bottom-width: 1px;
@@ -925,6 +937,9 @@ a.hide-toggle {
     border-bottom: 1px solid #ccc;
     border-radius: 0;
 }
+.no-results-item {
+    padding: 10px;
+}
 
 .geocode-item {
     width: 100%;
@@ -968,7 +983,7 @@ a.hide-toggle {
 }
 .feature-list-item .label {
     text-align: left;
-    padding: 10px 10px;
+    padding: 10px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -1584,6 +1599,7 @@ a.hide-toggle {
 ------------------------------------------------------- */
 .form-field-input-combo > input:only-of-type {
     border-radius: 0 0 4px 4px;
+    width: 100%;
 }
 .form-field-input-combo.empty-combobox input,
 .form-field-input-multicombo .empty-combobox input {
@@ -1621,7 +1637,6 @@ a.hide-toggle {
 .form-field-input-multicombo li.chip {
     background-color: #eff2f7;
     border: 1px solid #ccd5e3;
-    line-height: 25px;
     max-width: 100%;
 }
 .ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
@@ -1670,7 +1685,6 @@ a.hide-toggle {
 .form-field-input-multicombo input {
     border: none;
     width: 100%;
-    height: 100%;
 }
 
 .form-field-input-multicombo input:focus {
@@ -1848,7 +1862,7 @@ a.hide-toggle {
     padding: 0;
     opacity: 0;
     width: 0;
-    line-height: 0;
+    height: 0;
     display: block;
     overflow: hidden;
 }
@@ -2352,12 +2366,11 @@ div.combobox {
     display: flex;
     flex-flow: row nowrap;
     flex-direction: row-reverse;
-    margin-top: -25px;
+    margin-top: -28px;
 }
 button.raw-tag-option {
-    flex: 0 0 20px;
-    height: 20px;
-    width: 20px;
+    flex: 0 0 auto;
+    padding: 3px;
     background: #aaa;
     color: #eee;
     margin: 0 3px;
@@ -2380,7 +2393,7 @@ button.raw-tag-option.selected {
 button.raw-tag-option svg.icon {
     width: 14px;
     height: 14px;
-    vertical-align: text-bottom;
+    display: block;
 }
 .ideditor[dir='ltr'] button.raw-tag-option-list {
     transform: scaleX(-1);
@@ -2682,7 +2695,7 @@ input.key-trap {
 .qa-header-icon {
     background-color: #fff;
     padding: 10px;
-    flex: 0 0 62px;
+    flex: 0 0 auto;
     position: relative;
     width: 60px;
     height: 60px;
@@ -2747,7 +2760,7 @@ input.key-trap {
 }
 .comment-avatar {
     padding: 10px;
-    flex: 0 0 62px;
+    flex: 0 0 auto;
 }
 .comment-avatar .icon.comment-avatar-icon {
     width: 40px;
@@ -2850,7 +2863,7 @@ input.key-trap {
 .data-header-icon {
     background-color: #fff;
     padding: 10px;
-    flex: 0 0 62px;
+    flex: 0 0 auto;
     position: relative;
     width: 60px;
     height: 60px;
@@ -2897,6 +2910,7 @@ input.key-trap {
     display: flex;
     flex-direction: row-reverse;
     align-items: flex-end;
+    overflow: hidden;
 }
 .over-map > * {
     pointer-events: auto;
@@ -3369,6 +3383,7 @@ button.autofix.action.active {
 .issues-option label {
     display: table-cell;
     padding: 0 10px;
+    white-space: nowrap;
 }
 
 .layer-list.issues-list li.issue {
@@ -3405,8 +3420,8 @@ button.autofix.action.active {
 
 input.square-degrees-input {
     padding: 2px !important; /* important needed for rtl */
-    width: 40px;
-    height: unset;
+    width: 3em;
+    height: 2em;
     text-align: center;
     background: rgba(0,0,0,0);
     color: currentColor;
@@ -3706,9 +3721,9 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     width: 400px;
     max-width: 100%;
     height: 100%;
-    padding-bottom: 60px;
-    overflow: hidden;
     z-index: 10;
+    display: flex;
+    flex-direction: column;
 }
 
 .map-pane.help-pane {
@@ -3720,6 +3735,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     flex-flow: row nowrap;
     justify-content: space-between;
     border-bottom: 1px solid #ccc;
+    flex: 0 0 auto;
 }
 
 .pane-heading h2 {
@@ -3982,8 +3998,8 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     opacity: 1;
     color: #666;
     padding: 5px 10px;
-    line-height: 20px;
     width: 100%;
+    height: auto;
     border: 0;
 }
 .inspector-hover .form-field-input-radio .structure-extras-wrap {
@@ -4324,27 +4340,24 @@ img.tile-debug {
 /* Attribution
 ------------------------------------------------------- */
 .attribution-wrap {
-    width: 100%;
     position: absolute;
-    height: 20px;
-    top: -25px;
+    bottom: 5px;
+    left: 5px;
+    right: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
 }
 
 .attribution-wrap * { pointer-events: all; }
 
 .attribution-wrap .base-layer-attribution,
 .attribution-wrap .overlay-layer-attribution {
-    position: absolute;
     color: #ccc;
     font-size: 10px;
 }
-
-.attribution-wrap .base-layer-attribution {
-    left: 10px;
-}
-
 .attribution-wrap .overlay-layer-attribution {
-    right: 10px;
+    text-align: right;
 }
 
 .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
@@ -4418,14 +4431,17 @@ img.tile-debug {
 .map-footer-bar .scale-block {
     vertical-align: bottom;
     width: 250px;
-    flex: 0 0 250px;
+    flex: 0 0 auto;
     user-select: none;
+    height: 30px;
+    align-self: center;
 }
 
 .scale-block .scale {
-    height: 30px;
+    height: 100%;
     width: 100%;
     cursor: pointer;
+    display: block;
 }
 .ideditor[dir='rtl'] .scale-block .scale {
     transform: scaleX(-1);
@@ -4474,9 +4490,10 @@ img.tile-debug {
     padding: 5px 0 5px 5px;
     margin-left: 5px;
     height: 100%;
+    display: flex;
+    align-items: center;
 }
 .ideditor[dir='rtl'] .map-footer-list li {
-    float: left;
     border-left: none;
     border-right: 1px solid rgba(255,255,255,.5);
     margin-left: 0;
@@ -4497,7 +4514,7 @@ img.tile-debug {
 }
 
 .map-footer-list a.chip {
-    padding: 2px 4px 3px 4px;
+    padding: 1px 4px 1px 4px;
     border-radius: 2px;
     color: #eee;
 }
@@ -4717,7 +4734,7 @@ img.tile-debug {
     color: #7092ff;
     border-bottom: 1px solid #ccc;
     border-radius: 0;
-    height: 160px;
+    min-height: 160px;
     text-align: center;
     width: 100%;
 }
@@ -4982,20 +4999,6 @@ img.tile-debug {
     float: left;
 }
 
-.ideditor.mode-save h3 small.count {
-    margin-right: 10px;
-    text-align: center;
-    float: left;
-    height: 12px;
-    min-width: 12px;
-    font-size: 12px;
-    line-height: 12px;
-    border-radius: 24px;
-    padding: 5px;
-    background: #7092ff;
-    color: #fff;
-}
-
 .note-save .field-warning,
 .ideditor.mode-save .field-warning {
     background: #ffb;
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 5c123b717..b71bf8ebc 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -157,14 +157,20 @@ export function uiInit(context) {
             .attr('dir', 'ltr')
             .call(map);
 
-        content
+        var overMap = content
+            .append('div')
+            .attr('class', 'over-map');
+
+        overMap
             .append('div')
             .attr('class', 'spinner')
             .call(uiSpinner(context));
 
-        var overMap = content
+        overMap
             .append('div')
-            .attr('class', 'over-map');
+            .attr('class', 'attribution-wrap')
+            .attr('dir', 'ltr')
+            .call(uiAttribution(context));
 
         // Map controls
         var controls = overMap
@@ -228,17 +234,11 @@ export function uiInit(context) {
             .call(ui.photoviewer);
 
 
-        // Add attribution and footer
+        // Add footer
         var about = content
             .append('div')
             .attr('class', 'map-footer');
 
-        about
-            .append('div')
-            .attr('class', 'attribution-wrap')
-            .attr('dir', 'ltr')
-            .call(uiAttribution(context));
-
         about
             .append('div')
             .attr('class', 'api-status')
@@ -552,19 +552,21 @@ export function uiInit(context) {
     };
 
     ui.togglePanes = function(showPane) {
-        var shownPanes = context.container().selectAll('.map-pane.shown');
+        var hidePanes = context.container().selectAll('.map-pane.shown');
 
         var side = localizer.textDirection() === 'ltr' ? 'right' : 'left';
 
-        shownPanes
-            .classed('shown', false);
+        hidePanes
+            .classed('shown', false)
+            .classed('hide', true);
 
         context.container().selectAll('.map-pane-control button')
             .classed('active', false);
 
         if (showPane) {
-            shownPanes
-                .style('display', 'none')
+            hidePanes
+                .classed('shown', false)
+                .classed('hide', true)
                 .style(side, '-500px');
 
             context.container().selectAll('.' + showPane.attr('pane') + '-control button')
@@ -572,10 +574,9 @@ export function uiInit(context) {
 
             showPane
                 .classed('shown', true)
-                .style('display', 'block');
-            if (shownPanes.empty()) {
+                .classed('hide', false);
+            if (hidePanes.empty()) {
                 showPane
-                    .style('display', 'block')
                     .style(side, '-500px')
                     .transition()
                     .duration(200)
@@ -585,14 +586,17 @@ export function uiInit(context) {
                     .style(side, '0px');
             }
         } else {
-            shownPanes
-                .style('display', 'block')
+            hidePanes
+                .classed('shown', true)
+                .classed('hide', false)
                 .style(side, '0px')
                 .transition()
                 .duration(200)
                 .style(side, '-500px')
                 .on('end', function() {
-                    d3_select(this).style('display', 'none');
+                    d3_select(this)
+                        .classed('shown', false)
+                        .classed('hide', true);
                 });
         }
     };

From 992443753b5a00194a0338b62daac9fdadcb204f Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Fri, 11 Sep 2020 11:34:52 -0400
Subject: [PATCH 5/8] Make the scale bar text scale with dynamic text sizes

---
 css/80_app.css      | 12 ++++++------
 modules/ui/scale.js | 10 +++-------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index f01017cba..5ab158f83 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -4447,13 +4447,13 @@ img.tile-debug {
     transform: scaleX(-1);
 }
 
-.scale-block .scale text {
-    font: 12px sans-serif;
-    stroke: none;
-    fill: #ccc;
-    text-anchor: start;
+.scale-block .scale-text {
+    display: inline-block;
+    position: absolute;
+    color: #ccc;
+    top: 0.45em;
 }
-.ideditor[dir='rtl'] .scale-block .scale text {
+.ideditor[dir='rtl'] .scale-block .scale-text {
     transform: scaleX(-1);
 }
 
diff --git a/modules/ui/scale.js b/modules/ui/scale.js
index 078d6ff5a..ef4f12028 100644
--- a/modules/ui/scale.js
+++ b/modules/ui/scale.js
@@ -53,10 +53,8 @@ export function uiScale(context) {
         selection.select('.scale-path')
             .attr('d', 'M0.5,0.5v' + tickHeight + 'h' + scale.px + 'v-' + tickHeight);
 
-        selection.select('.scale-textgroup')
-            .attr('transform', 'translate(' + (scale.px + 8) + ',' + tickHeight + ')');
-
         selection.select('.scale-text')
+            .style('left', (scale.px + 16) + 'px')
             .text(scale.text);
     }
 
@@ -77,10 +75,8 @@ export function uiScale(context) {
             .append('path')
             .attr('class', 'scale-path');
 
-        scalegroup
-            .append('g')
-            .attr('class', 'scale-textgroup')
-            .append('text')
+        selection
+            .append('div')
             .attr('class', 'scale-text');
 
         selection.call(update);

From 7165350a9b43fa50df9080c72713aa074a344cfc Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Fri, 11 Sep 2020 12:19:47 -0400
Subject: [PATCH 6/8] Fix combo caret alignment

---
 css/80_app.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 5ab158f83..338ed834b 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -2200,10 +2200,11 @@ div.combobox {
 .combobox-caret {
     display: inline-block;
     position: relative;
-    height: 100%;
+    height: 5px;
     width: 30px !important;
     margin-left: -30px;
-    vertical-align: top;
+    align-self: center;
+    vertical-align: middle;
     cursor: pointer;
 }
 .ideditor[dir='rtl'] .combobox-caret {

From 868c0a380bee92e49578a5a6a80c466661501be6 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Fri, 11 Sep 2020 12:51:44 -0400
Subject: [PATCH 7/8] Improve dynamic text scaling in the imagery offset
 control

---
 css/80_app.css                           | 46 +++++++++++++-----------
 modules/ui/sections/background_offset.js |  3 +-
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 338ed834b..09e1d1cc3 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3580,7 +3580,8 @@ li.issue-fix-item:not(.actionable) .fix-icon {
 .background-pane .nudge-container {
     border: 1px solid #ccc;
     border-radius: 4px;
-    padding: 10px;
+    padding: 10px 10px 40px 10px;
+    position: relative;
 }
 
 .nudge-container .nudge-instructions {
@@ -3603,6 +3604,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     touch-action: none;
     /* disable drag-to-select */
     user-select: none;
+    position: relative;
 }
 
 .nudge-container .nudge-inner-rect {
@@ -3641,35 +3643,37 @@ li.issue-fix-item:not(.actionable) .fix-icon {
 }
 
 .nudge-container button {
-    float: left;
-    display: block;
-    width: 20%;
-    height: 40px;
-    position: relative;
+    position: absolute;
     background-color: transparent;
 }
-
-.nudge-container button.right {
-    top: -50px;
-    right: -85%;
-}
-
+.nudge-container button.right,
 .nudge-container button.left {
-    top: -50px;
-    right: 45%;
+    width: 40px;
+    height: 40%;
+    top: 30%;
 }
-
-.nudge-container button.top {
-    left: 20%;
-    top: -104px;
+.nudge-container button.right {
+    left: 100%;
 }
-
+.nudge-container button.left {
+    right: 100%;
+}
+.nudge-container button.top,
 .nudge-container button.bottom {
-    left: -20%;
+    width: 20%;
+    height: 40px;
+    left: 40%;
+}
+.nudge-container button.top {
+    bottom: 100%;
+}
+.nudge-container button.bottom {
+    top: 100%;
 }
 
 .nudge-container button.nudge-reset {
-    right: -10px;
+    right: 15px;
+    bottom: 15px;
 }
 
 .nudge-surface {
diff --git a/modules/ui/sections/background_offset.js b/modules/ui/sections/background_offset.js
index e256a1c48..cdd12fe28 100644
--- a/modules/ui/sections/background_offset.js
+++ b/modules/ui/sections/background_offset.js
@@ -172,9 +172,10 @@ export function uiSectionBackgroundOffset(context) {
             .append('div')
             .attr('class', 'nudge-inner-rect')
             .append('input')
+            .attr('type', 'text')
             .on('change', inputOffset);
 
-        containerEnter
+        nudgeEnter
             .append('div')
             .selectAll('button')
             .data(_directions).enter()

From 2e9b8acef6bd836b8e58baf1ed4b54121bab294c Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Fri, 11 Sep 2020 13:00:10 -0400
Subject: [PATCH 8/8] Fix some RTL layout issues

---
 css/80_app.css      | 7 ++-----
 modules/ui/scale.js | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 09e1d1cc3..b4650e4f3 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1877,13 +1877,13 @@ a.hide-toggle {
     flex: 0 1 auto;
     width: 80px;
 }
-.form-field-input-maxspeed > input:first-of-type {
+.ideditor[dir='ltr'] .form-field-input-maxspeed > input:first-of-type {
     border-radius: 0 0 0 4px;
 }
 .ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
     border-radius: 0 0 4px 0;
 }
-.form-field-input-maxspeed > input:last-of-type {
+.ideditor[dir='ltr'] .form-field-input-maxspeed > input:last-of-type {
     border-left: 0;
     border-radius: 0 0 4px 0;
 }
@@ -4458,9 +4458,6 @@ img.tile-debug {
     color: #ccc;
     top: 0.45em;
 }
-.ideditor[dir='rtl'] .scale-block .scale-text {
-    transform: scaleX(-1);
-}
 
 .scale-block .scale path {
     fill: none;
diff --git a/modules/ui/scale.js b/modules/ui/scale.js
index ef4f12028..c558e7ee4 100644
--- a/modules/ui/scale.js
+++ b/modules/ui/scale.js
@@ -54,7 +54,7 @@ export function uiScale(context) {
             .attr('d', 'M0.5,0.5v' + tickHeight + 'h' + scale.px + 'v-' + tickHeight);
 
         selection.select('.scale-text')
-            .style('left', (scale.px + 16) + 'px')
+            .style(localizer.textDirection() === 'ltr' ? 'left' : 'right', (scale.px + 16) + 'px')
             .text(scale.text);
     }