From f4a64c27a450fdd8826225eadca4982c1b116dbd Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Sun, 4 Nov 2018 11:55:29 -0800
Subject: [PATCH 1/2] Keeps the raw tag editor buttons fixed-width using
 flexbox

---
 css/80_app.css               | 30 ++++++++----------------------
 modules/ui/raw_tag_editor.js | 16 ++++++++++------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 5888cd007d..e1813d0d4d 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -413,11 +413,7 @@ button.active {
 }
 
 button.minor {
-    position: absolute;
-    top: 0;
-    right: 0;
     height: 100%;
-    width: 10%;
     border-radius: 0;
     background-color: #fafafa;
 }
@@ -2210,7 +2206,11 @@ div.combobox {
 .tag-row {
     width: 100%;
     position: relative;
-    clear: both;
+}
+.tag-row .inner-wrap {
+    width: 100%;
+    position: relative;
+    display: flex;
 }
 
 .tag-row.readonly,
@@ -2236,14 +2236,9 @@ div.combobox {
 
 .tag-row .key-wrap,
 .tag-row .input-wrap-position {
-    width: 40%;
-    float: left;
+    flex: 1 0.5 100%;
     height: 30px;
 }
-[dir='rtl'] .tag-row .key-wrap,
-[dir='rtl'] .tag-row .input-wrap-position {
-    float: right;
-}
 
 .tag-row input.key {
     font-weight: bold;
@@ -2271,15 +2266,13 @@ div.combobox {
 }
 
 .tag-row button {
-    position: absolute;
     height: 31px;
-    right: 10%;
+    flex: 0 0 33px;
     border: 1px solid #ccc;
     border-top-width: 0;
     border-left-width: 0;
 }
 [dir='rtl'] .tag-row button {
-    left: 10%;
     border-left-width: 1px;
     border-right-width: 0;
 }
@@ -2313,16 +2306,10 @@ div.combobox {
 }
 
 .tag-row .tag-reference-button {
-    right: 0;
     border-radius: 0;
-    width: 10%;
-    top: 0;
     background: #fafafa;
 }
 [dir='rtl'] .tag-row .tag-reference-button {
-    left: auto;
-    right: auto;
-    margin-right: 35px;
     border-left-width: 1px;
     border-right-width: 0;
 }
@@ -2378,7 +2365,6 @@ button.minor.tag-reference-loading {
 }
 
 .raw-tag-editor .tag-reference-body {
-    float: left;
     width: 100%;
 }
 
@@ -2387,7 +2373,7 @@ button.minor.tag-reference-loading {
     color: #333;
 }
 
-.raw-tag-editor .tag-row:not(:last-child) .tag-reference-body {
+.raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
     border-bottom: 1px solid #ccc;
 }
 
diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js
index d5a4fb23a5..37952b9959 100644
--- a/modules/ui/raw_tag_editor.js
+++ b/modules/ui/raw_tag_editor.js
@@ -106,7 +106,10 @@ export function uiRawTagEditor(context) {
             .attr('class', 'tag-row cf')
             .classed('readonly', isReadOnly);
 
-        enter
+        var innerWrap = enter.append('div')
+            .attr('class', 'inner-wrap')
+
+        innerWrap
             .append('div')
             .attr('class', 'key-wrap')
             .append('input')
@@ -117,7 +120,7 @@ export function uiRawTagEditor(context) {
             .on('blur', keyChange)
             .on('change', keyChange);
 
-        enter
+        innerWrap
             .append('div')
             .attr('class', 'input-wrap-position')
             .append('input')
@@ -129,7 +132,7 @@ export function uiRawTagEditor(context) {
             .on('change', valueChange)
             .on('keydown.push-more', pushMore);
 
-        enter
+        innerWrap
             .append('button')
             .attr('tabindex', -1)
             .attr('class', 'remove minor')
@@ -169,9 +172,10 @@ export function uiRawTagEditor(context) {
                     reference.showing(false);
                 }
 
-                row
-                    .call(reference.button)
-                    .call(reference.body);
+                row.select('.inner-wrap')
+                    .call(reference.button);
+
+                row.call(reference.body);
             });
 
         items.selectAll('input.key')

From 1db80ff49c3df3964e779b37bdb0636e3dec2031 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Sun, 4 Nov 2018 12:06:32 -0800
Subject: [PATCH 2/2] Adds missing semicolon

---
 modules/ui/raw_tag_editor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js
index 37952b9959..5e67edad48 100644
--- a/modules/ui/raw_tag_editor.js
+++ b/modules/ui/raw_tag_editor.js
@@ -107,7 +107,7 @@ export function uiRawTagEditor(context) {
             .classed('readonly', isReadOnly);
 
         var innerWrap = enter.append('div')
-            .attr('class', 'inner-wrap')
+            .attr('class', 'inner-wrap');
 
         innerWrap
             .append('div')