diff --git a/app/scripts/directives/editEnvironmentFrom.js b/app/scripts/directives/editEnvironmentFrom.js index 966791f902..be74ab65cb 100644 --- a/app/scripts/directives/editEnvironmentFrom.js +++ b/app/scripts/directives/editEnvironmentFrom.js @@ -8,11 +8,9 @@ EditEnvironmentFrom ], bindings: { - addRowLink: '@', // creates a link to "add row" and sets its text label - entries: '=', // an array of objects containing configmaps and secrets - envFromSelectorOptions: '<', // dropdown selector options, an array of objects - selectorPlaceholder: '@', // placeholder copy for dropdown selector - isReadonly: '<?' // display as read only values + entries: '=', // an array of objects containing configmaps and secrets + envFromSelectorOptions: '<', // dropdown selector options, an array of objects + isReadonly: '<?' // display as read only values }, templateUrl: 'views/directives/edit-environment-from.html' }); @@ -52,7 +50,7 @@ ctrl.envFromEntries.splice(start, deleteCount); - if(!ctrl.envFromEntries.length && ctrl.addRowLink) { + if(!ctrl.envFromEntries.length) { addEntry(ctrl.envFromEntries); } @@ -105,6 +103,10 @@ break; } + if (entry.prefix) { + newEnvFrom.prefix = entry.prefix; + } + _.assign(ctrl.envFromEntries[index], newEnvFrom); ctrl.updateEntries(ctrl.envFromEntries); }; @@ -121,7 +123,7 @@ ctrl.envFromEntries = ctrl.entries || []; - if(!ctrl.envFromEntries.length) { + if (!ctrl.envFromEntries.length) { addEntry(ctrl.envFromEntries); } diff --git a/app/styles/_kve.less b/app/styles/_kve.less index 0da8fc12a8..37e168b314 100644 --- a/app/styles/_kve.less +++ b/app/styles/_kve.less @@ -115,18 +115,20 @@ width: (@as-sortable-item-button-width * 2); } - .key-value-editor-entry, .environment-from-entry { display: table; margin-bottom: 15px; - padding-right: (@as-sortable-item-button-width * 2); + padding-right: 0; + @media(max-width: @screen-xxs-max) { + padding-right: (@as-sortable-item-button-width * 2); + } position: relative; table-layout: fixed; width: 100%; - @media(min-width: @screen-md-min) { + @media(min-width: @screen-xs-min) { .environment-from-editor-button { float: left; - padding-right: 5px; + padding: 0 5px; position: relative; width: auto; } @@ -136,8 +138,16 @@ margin-bottom: 0; padding-right: 5px; width: 100%; - @media(min-width: @screen-md-min) { - width: 50%; + @media(min-width: @screen-xs-min) { + width: calc(~"50% - 26px"); // Adjust env-from width to match kve input, when env-from row doesn't have padding-right; + } + &.prefix { + padding-right: 0; + width: calc(~"50% + 26px"); // Adjust prefix width to match kve input, when env-from row doesn't have padding-right; + @media(max-width: @screen-xxs-max) { + margin-top: 5px; + width: 100%; + } } .faux-input-group, .ui-select { @@ -145,8 +155,6 @@ width: 100%; } } - } - .environment-from-entry { .environment-from-view-details { float: left; line-height: 1; @@ -154,6 +162,14 @@ } } + .key-value-editor-entry { + display: table; + margin-bottom: 15px; + padding-right: (@as-sortable-item-button-width * 2); + position: relative; + table-layout: fixed; + width: 100%; + } .key-value-editor-input .ui-select { @media(min-width: @screen-md-min) { float: left; @@ -170,7 +186,8 @@ } .key-value-editor .key-value-editor-input, -.key-value-editor-header { +.key-value-editor-header, +.environment-from-editor-header { float: left; margin-bottom: 0; padding-right: 5px; diff --git a/app/views/directives/edit-environment-from.html b/app/views/directives/edit-environment-from.html index 6a3ac4419a..76dbed991e 100644 --- a/app/views/directives/edit-environment-from.html +++ b/app/views/directives/edit-environment-from.html @@ -4,10 +4,21 @@ class="environment-from-entry environment-from-editor-entry-header"> <div class="form-group environment-from-editor-header value-header"> <div class="input-group"> - <span class="help-block">{{$ctrl.selectorPlaceholder}}</span> + Config Map/Secret + </div> + </div> + <div class="form-group environment-from-editor-header value-header"> + <div class="input-group" + ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()"> + Prefix + <small class="pficon pficon-help" + aria-hidden="true" + data-toggle="tooltip" + data-original-title="Optional prefix added to each environment variable name."></small> </div> </div> </div> + <div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners"> <div class="environment-from-entry" @@ -23,8 +34,9 @@ </div> <div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly"> Use all keys and values from - <span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}</span> - <span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}</span> + <span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}.</span> + <span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}.</span> + <span ng-if="entry.prefix">Names will be prefixed with "{{entry.prefix}}"</span> </div> </div> @@ -50,27 +62,59 @@ </div> </div> - <div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button"> - <span - ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1" - class="fa fa-bars sort-row" - role="button" - aria-label="Move row" - aria-grabbed="false" - as-sortable-item-handle></span> - <a - ng-if="!$ctrl.cannotDeleteAny" - href="" - class="pficon pficon-close delete-row as-sortable-item-delete" - role="button" - aria-label="Delete row" - ng-click="$ctrl.deleteEntry($index, 1)"></a> - </div> - <div class="environment-from-view-details"> - <a - href="" - ng-if="entry.selectedEnvFrom" - ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a> + <div class="form-group environment-from-input prefix"> + <div class="environment-from-input" + ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()" + ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }"> + <label for="envfrom-prefix-{{$index}}" class="sr-only">Prefix</label> + <input type="text" + class="form-control" + placeholder="Add prefix" + id="envfrom-prefix-{{$index}}" + name="envfrom-prefix-{{$index}}" + ng-model="entry.prefix" + ng-pattern="/^[a-zA-Z0-9_]+$/"> + + <span ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched"> + <span class="help-block key-validation-error" + ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern"> + <span class="validation-text">Please enter a valid prefix.</span> + <span class="help action-inline"> + <a + aria-hidden="true" + data-toggle="tooltip" + data-placement="top" + data-original-title="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."> + <span class="pficon pficon-help"></span> + </a> + </span> + </span> + </span> + </div> + + <div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button"> + <span + ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1" + class="fa fa-bars sort-row" + role="button" + aria-label="Move row" + aria-grabbed="false" + as-sortable-item-handle></span> + <a + ng-if="!$ctrl.cannotDeleteAny" + href="" + class="pficon pficon-close delete-row as-sortable-item-delete" + role="button" + aria-label="Delete row" + ng-click="$ctrl.deleteEntry($index, 1)"></a> + </div> + + <div class="environment-from-view-details"> + <a + ng-if="entry.selectedEnvFrom" + href="" + ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a> + </div> </div> </div> @@ -79,7 +123,7 @@ href="" class="add-row-link" role="button" - ng-click="$ctrl.onAddRow()">{{$ctrl.addRowLink}}</a> + ng-click="$ctrl.onAddRow()">Add ALL Values from Config Map or Secret</a> </div> </div> diff --git a/app/views/directives/edit-environment-variables.html b/app/views/directives/edit-environment-variables.html index 2c2fa1ec98..d21923353a 100644 --- a/app/views/directives/edit-environment-variables.html +++ b/app/views/directives/edit-environment-variables.html @@ -43,9 +43,7 @@ <h4 class="section-label"> </h4> <edit-environment-from entries="container.envFrom" - selector-placeholder="Config Map/Secret" env-from-selector-options="$ctrl.valueFromObjects" - add-row-link="Add ALL Values from Config Map or Secret" is-readonly="$ctrl.ngReadonly" show-header> </edit-environment-from> diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js index c60e3b5a11..87bfb823c2 100644 --- a/dist/scripts/scripts.js +++ b/dist/scripts/scripts.js @@ -9232,7 +9232,7 @@ e && e.push(t || {}); a.onAddRow = function() { s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass); }, a.deleteEntry = function(e, t) { -a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), !a.envFromEntries.length && a.addRowLink && s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty()); +a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), a.envFromEntries.length || s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty()); }, a.hasOptions = function() { return !_.isEmpty(a.envFromSelectorOptions); }, a.hasEntries = function() { @@ -9264,7 +9264,7 @@ r.configMapRef = { name: n.metadata.name }, delete a.envFromEntries[e].secretRef; } -_.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries); +t.prefix && (r.prefix = t.prefix), _.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries); }, a.updateEntries = function(e) { a.entries = _.filter(e, function(e) { return e.secretRef || e.configMapRef; @@ -9296,10 +9296,8 @@ c(), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.ca }; } ], bindings: { -addRowLink: "@", entries: "=", envFromSelectorOptions: "<", -selectorPlaceholder: "@", isReadonly: "<?" }, templateUrl: "views/directives/edit-environment-from.html" diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js index 21f29bf424..6b12a87509 100644 --- a/dist/scripts/templates.js +++ b/dist/scripts/templates.js @@ -6700,7 +6700,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function( "<div ng-if=\"$ctrl.showHeader\" class=\"environment-from-entry environment-from-editor-entry-header\">\n" + "<div class=\"form-group environment-from-editor-header value-header\">\n" + "<div class=\"input-group\">\n" + - "<span class=\"help-block\">{{$ctrl.selectorPlaceholder}}</span>\n" + + "Config Map/Secret\n" + + "</div>\n" + + "</div>\n" + + "<div class=\"form-group environment-from-editor-header value-header\">\n" + + "<div class=\"input-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" + + "Prefix\n" + + "<small class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name.\"></small>\n" + "</div>\n" + "</div>\n" + "</div>\n" + @@ -6713,8 +6719,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function( "</div>\n" + "<div ng-if=\"entry.configMapRef.name || entry.secretRef.name\" class=\"faux-form-control readonly\">\n" + "Use all keys and values from\n" + - "<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}</span>\n" + - "<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}</span>\n" + + "<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}.</span>\n" + + "<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}.</span>\n" + + "<span ng-if=\"entry.prefix\">Names will be prefixed with \"{{entry.prefix}}\"</span>\n" + "</div>\n" + "</div>\n" + "<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\">\n" + @@ -6733,16 +6740,32 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function( "</div>\n" + "</div>\n" + "</div>\n" + + "<div class=\"form-group environment-from-input prefix\">\n" + + "<div class=\"environment-from-input\" ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\" ng-class=\"{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }\">\n" + + "<label for=\"envfrom-prefix-{{$index}}\" class=\"sr-only\">Prefix</label>\n" + + "<input type=\"text\" class=\"form-control\" placeholder=\"Add prefix\" id=\"envfrom-prefix-{{$index}}\" name=\"envfrom-prefix-{{$index}}\" ng-model=\"entry.prefix\" ng-pattern=\"/^[a-zA-Z0-9_]+$/\">\n" + + "<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" + + "<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" + + "<span class=\"validation-text\">Please enter a valid prefix.</span>\n" + + "<span class=\"help action-inline\">\n" + + "<a aria-hidden=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" data-original-title=\"A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\">\n" + + "<span class=\"pficon pficon-help\"></span>\n" + + "</a>\n" + + "</span>\n" + + "</span>\n" + + "</span>\n" + + "</div>\n" + "<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()\" class=\"environment-from-editor-button\">\n" + "<span ng-if=\"!$ctrl.cannotSort && $ctrl.entries.length > 1\" class=\"fa fa-bars sort-row\" role=\"button\" aria-label=\"Move row\" aria-grabbed=\"false\" as-sortable-item-handle></span>\n" + "<a ng-if=\"!$ctrl.cannotDeleteAny\" href=\"\" class=\"pficon pficon-close delete-row as-sortable-item-delete\" role=\"button\" aria-label=\"Delete row\" ng-click=\"$ctrl.deleteEntry($index, 1)\"></a>\n" + "</div>\n" + "<div class=\"environment-from-view-details\">\n" + - "<a href=\"\" ng-if=\"entry.selectedEnvFrom\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" + + "<a ng-if=\"entry.selectedEnvFrom\" href=\"\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" + + "</div>\n" + "</div>\n" + "</div>\n" + "<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" + - "<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{$ctrl.addRowLink}}</a>\n" + + "<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">Add ALL Values from Config Map or Secret</a>\n" + "</div>\n" + "</div>\n" + "<overlay-panel class=\"add-config-to-application\" show-panel=\"$ctrl.overlayPanelVisible\" show-close=\"true\" handle-close=\"$ctrl.closeOverlayPanel\">\n" + @@ -6796,7 +6819,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function( "Environment From\n" + "<span class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" + "</h4>\n" + - "<edit-environment-from entries=\"container.envFrom\" selector-placeholder=\"Config Map/Secret\" env-from-selector-options=\"$ctrl.valueFromObjects\" add-row-link=\"Add ALL Values from Config Map or Secret\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" + + "<edit-environment-from entries=\"container.envFrom\" env-from-selector-options=\"$ctrl.valueFromObjects\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" + "</edit-environment-from>\n" + "</div>\n" + "<button class=\"btn btn-default\" ng-if=\"$ctrl.canIUpdate && !$ctrl.ngReadonly\" ng-click=\"$ctrl.save()\" ng-disabled=\"$ctrl.form.$pristine || $ctrl.form.$invalid\">Save</button>\n" + diff --git a/dist/styles/main.css b/dist/styles/main.css index 067c48b5f8..1fda67b274 100644 --- a/dist/styles/main.css +++ b/dist/styles/main.css @@ -404,7 +404,7 @@ dd{margin-left:0} @media (min-width:415px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dl-horizontal dd{margin-left:180px} } -.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.dropdown-menu>li>a,.form-horizontal .form-group:after,.list-view-pf .list-group-item:after,.log-view,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both} +.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.list-view-pf .list-group-item:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both} abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #9c9c9c} .initialism{font-size:90%;text-transform:uppercase} blockquote{padding:10.5px 21px;margin:0 0 21px;font-size:16.25px;border-left:5px solid #f1f1f1} @@ -829,7 +829,7 @@ tbody.collapse.in{display:table-row-group} .btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle,.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0} .btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child,.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0} .btn-group-vertical>.btn:not(:first-child):not(:last-child),.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0} -.dropdown-menu>li>a{display:block;font-weight:400;color:#363636} +.dropdown-menu>li>a{display:block;clear:both;font-weight:400;color:#363636} .dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{text-decoration:none;color:#4d5258;background-color:#def3ff} .dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;outline:0} .dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#9c9c9c} @@ -5718,7 +5718,7 @@ alerts+.chromeless .log-loading-msg{margin-top:130px} .log-size-warning{margin:0} @media (max-width:991px){.log-size-warning{margin-top:20px} } -.log-view{margin-bottom:20px;position:relative} +.log-view{clear:both;margin-bottom:20px;position:relative} .log-end-msg,.log-view .log-scroll a{font-family:"Open Sans",Helvetica,Arial,sans-serif} .chromeless .log-view{margin-bottom:0} .log-view pre,.log-view pre code{background-color:transparent;border:0;margin-bottom:0;overflow:visible;padding:0 10px} @@ -5903,19 +5903,25 @@ kubernetes-container-terminal .terminal-actions .spinner{top:5px} .environment-from-editor .faux-input-group,.key-value-editor .faux-input-group{border-collapse:separate;display:table;position:relative} .environment-from-editor .faux-input-group.faux-input-single-input,.key-value-editor .faux-input-group.faux-input-single-input{width:100%} .environment-from-editor .environment-from-editor-button,.environment-from-editor .key-value-editor-buttons,.key-value-editor .environment-from-editor-button,.key-value-editor .key-value-editor-buttons{position:absolute;right:0;top:0;width:52px} -.environment-from-editor .environment-from-entry,.environment-from-editor .key-value-editor-entry,.key-value-editor .environment-from-entry,.key-value-editor .key-value-editor-entry{display:table;margin-bottom:15px;padding-right:52px;position:relative;table-layout:fixed;width:100%} -@media (min-width:992px){.environment-from-editor .environment-from-entry .environment-from-editor-button,.environment-from-editor .key-value-editor-entry .environment-from-editor-button,.key-value-editor .environment-from-entry .environment-from-editor-button,.key-value-editor .key-value-editor-entry .environment-from-editor-button{float:left;padding-right:5px;position:relative;width:auto} +.environment-from-editor .environment-from-entry,.key-value-editor .environment-from-entry{display:table;margin-bottom:15px;padding-right:0;position:relative;table-layout:fixed;width:100%} +@media (max-width:479px){.environment-from-editor .environment-from-entry,.key-value-editor .environment-from-entry{padding-right:52px} } -.environment-from-editor .environment-from-entry .environment-from-input,.environment-from-editor .key-value-editor-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input,.key-value-editor .key-value-editor-entry .environment-from-input{float:left;margin-bottom:0;padding-right:5px;width:100%} -@media (min-width:992px){.environment-from-editor .environment-from-entry .environment-from-input,.environment-from-editor .key-value-editor-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input,.key-value-editor .key-value-editor-entry .environment-from-input{width:50%} +@media (min-width:480px){.environment-from-editor .environment-from-entry .environment-from-editor-button,.key-value-editor .environment-from-entry .environment-from-editor-button{float:left;padding:0 5px;position:relative;width:auto} } -.environment-from-editor .environment-from-entry .environment-from-input .faux-input-group,.environment-from-editor .environment-from-entry .environment-from-input .ui-select,.environment-from-editor .key-value-editor-entry .environment-from-input .faux-input-group,.environment-from-editor .key-value-editor-entry .environment-from-input .ui-select,.key-value-editor .environment-from-entry .environment-from-input .faux-input-group,.key-value-editor .environment-from-entry .environment-from-input .ui-select,.key-value-editor .key-value-editor-entry .environment-from-input .faux-input-group,.key-value-editor .key-value-editor-entry .environment-from-input .ui-select{float:left;width:100%} +.environment-from-editor .environment-from-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input{float:left;margin-bottom:0;padding-right:5px;width:100%} +@media (min-width:480px){.environment-from-editor .environment-from-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input{width:calc(50% - 26px)} +} +.environment-from-editor .environment-from-entry .environment-from-input.prefix,.key-value-editor .environment-from-entry .environment-from-input.prefix{padding-right:0;width:calc(50% + 26px)} +@media (max-width:479px){.environment-from-editor .environment-from-entry .environment-from-input.prefix,.key-value-editor .environment-from-entry .environment-from-input.prefix{margin-top:5px;width:100%} +} +.environment-from-editor .environment-from-entry .environment-from-input .faux-input-group,.environment-from-editor .environment-from-entry .environment-from-input .ui-select,.key-value-editor .environment-from-entry .environment-from-input .faux-input-group,.key-value-editor .environment-from-entry .environment-from-input .ui-select{float:left;width:100%} .environment-from-editor .environment-from-entry .environment-from-view-details,.key-value-editor .environment-from-entry .environment-from-view-details{float:left;line-height:1;padding:6px 0 0} +.environment-from-editor .key-value-editor-entry,.key-value-editor .key-value-editor-entry{display:table;margin-bottom:15px;padding-right:52px;position:relative;table-layout:fixed;width:100%} .environment-from-editor .key-value-editor-input .ui-select+.ui-select,.key-value-editor .key-value-editor-input .ui-select+.ui-select{padding-top:5px} @media (min-width:992px){.environment-from-editor .key-value-editor-input .ui-select,.key-value-editor .key-value-editor-input .ui-select{float:left;width:50%} .environment-from-editor .key-value-editor-input .ui-select+.ui-select,.key-value-editor .key-value-editor-input .ui-select+.ui-select{padding-top:0;padding-left:5px} } -.key-value-editor .key-value-editor-input,.key-value-editor-header{float:left;margin-bottom:0;padding-right:5px;width:50%} +.environment-from-editor-header,.key-value-editor .key-value-editor-input,.key-value-editor-header{float:left;margin-bottom:0;padding-right:5px;width:50%} .membership .content-pane,.membership .content-pane .col-add-role{width:100%} .environment-from-editor-entry-header,.key-value-editor-entry-header{padding-right:52px} .environment-from-editor-header,.key-value-editor-header{margin-bottom:5px}