Only wrap on medium size screens and smaller and make use of extra space in dropdown select field

client/galaxy/scripts/mvc/ui/ui-select-content.js

@@ -335,7 +335,7 @@ const View = Backbone.View.extend({
         this.button_type = new Ui.RadioButton.View({
             value: this.model.get("current"),
             data: this.button_data,
-            cls: "mr-2 mt-2",
+            cls: "pr-lg-2",
             onchange: function(value) {
                 self.model.set("current", value);
                 self.trigger("change");
@@ -346,7 +346,6 @@ const View = Backbone.View.extend({
         this.button_dialog = new Ui.Button({
             icon: "fa-folder-open-o",
             tooltip: "Browse Datasets",
-            cls: "mt-2",
             onclick: () => {
                 const current = this.model.get("current");
                 const cnf = this.config[current];
@@ -364,10 +363,10 @@ const View = Backbone.View.extend({
         });
 
         // append views
-        const $fields = $("<div/>").addClass("flex-fill mr-2 mt-2");
+        const $fields = $("<div/>").addClass("overflow-auto w-100 py-2 py-lg-0 pr-lg-2 ");
         this.$el
             .empty()
-            .addClass("d-flex flex-row flex-wrap mt-n2")
+            .addClass("d-flex flex-row flex-wrap flex-lg-nowrap")
             .append($("<div/>").append(this.button_type.$el))
             .append($fields)
             .append($("<div/>").append(this.button_dialog.$el));

client/galaxy/style/scss/ui.scss

@@ -422,9 +422,6 @@ $ui-margin-horizontal-large: $margin-v * 2;
             -webkit-appearance: none;
             -moz-border-radius: $border-radius-base;
             line-height: 1.5rem;
-            .select2-chosen {
-                white-space: normal;
-            }
             .select2-arrow {
                 display: none;
             }