Merge pull request #5467 from quincylvania/tag-row-flexbox

Keeps the raw tag editor buttons fixed-width using flexbox

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;
 }
 

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')