fix: Explore: Query wrapping on long queries #15222

packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx

@@ -49,7 +49,7 @@ export default class SelectOptionGroup extends PureComponent<ExtendedGroupProps,
     return (
     return (
       <div className="gf-form-select-box__option-group">
       <div className="gf-form-select-box__option-group">
         <div className="gf-form-select-box__option-group__header" onClick={this.onToggleChildren}>
         <div className="gf-form-select-box__option-group__header" onClick={this.onToggleChildren}>
-          <span className="flex-grow">{label}</span>
+          <span className="flex-grow-1">{label}</span>
           <i className={`fa ${expanded ? 'fa-caret-left' : 'fa-caret-down'}`} />{' '}
           <i className={`fa ${expanded ? 'fa-caret-left' : 'fa-caret-down'}`} />{' '}
         </div>
         </div>
         {expanded && children}
         {expanded && children}

public/app/features/dashboard/panel_editor/QueriesTab.tsx

@@ -133,7 +133,7 @@ export class QueriesTab extends PureComponent<Props, State> {
     return (
     return (
       <>
       <>
         <DataSourcePicker datasources={this.datasources} onChange={this.onChangeDataSource} current={currentDS} />
         <DataSourcePicker datasources={this.datasources} onChange={this.onChangeDataSource} current={currentDS} />
-        <div className="flex-grow" />
+        <div className="flex-grow-1" />
         {!isAddingMixed && (
         {!isAddingMixed && (
           <button className="btn navbar-button navbar-button--primary" onClick={this.onAddQueryClick}>
           <button className="btn navbar-button navbar-button--primary" onClick={this.onAddQueryClick}>
             Add Query
             Add Query

public/app/features/explore/QueryRow.tsx

@@ -111,7 +111,7 @@ export class QueryRow extends PureComponent<QueryRowProps> {
         <div className="query-row-status">
         <div className="query-row-status">
           <QueryTransactionStatus transactions={transactions} />
           <QueryTransactionStatus transactions={transactions} />
         </div>
         </div>
-        <div className="query-row-field">
+        <div className="query-row-field flex-shrink-1">
           {QueryField ? (
           {QueryField ? (
             <QueryField
             <QueryField
               datasource={datasourceInstance}
               datasource={datasourceInstance}
@@ -135,7 +135,7 @@ export class QueryRow extends PureComponent<QueryRowProps> {
             />
             />
           )}
           )}
         </div>
         </div>
-        <div className="gf-form-inline">
+        <div className="gf-form-inline flex-shrink-0">
           <div className="gf-form">
           <div className="gf-form">
             <button className="gf-form-label gf-form-label--btn" onClick={this.onClickClearButton}>
             <button className="gf-form-label gf-form-label--btn" onClick={this.onClickClearButton}>
               <i className="fa fa-times" />
               <i className="fa fa-times" />

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -249,15 +249,15 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
 
 
     return (
     return (
       <>
       <>
-        <div className="gf-form-inline">
-          <div className="gf-form">
+        <div className="gf-form-inline gf-form-inline--nowrap">
+          <div className="gf-form flex-shrink-0">
             <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
             <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
               <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
               <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
                 {chooserText} <i className="fa fa-caret-down" />
                 {chooserText} <i className="fa fa-caret-down" />
               </button>
               </button>
             </Cascader>
             </Cascader>
           </div>
           </div>
-          <div className="gf-form gf-form--grow">
+          <div className="gf-form gf-form--grow flex-shrink-1">
             <QueryField
             <QueryField
               additionalPlugins={this.plugins}
               additionalPlugins={this.plugins}
               cleanText={cleanText}
               cleanText={cleanText}

public/sass/components/_gf-form.scss

@@ -84,6 +84,10 @@ $input-border: 1px solid $input-border-color;
   .gf-form + .gf-form {
   .gf-form + .gf-form {
     margin-left: $gf-form-margin;
     margin-left: $gf-form-margin;
   }
   }
+
+  &--nowrap {
+    flex-wrap: nowrap;
+  }
 }
 }
 
 
 .gf-form-button-row {
 .gf-form-button-row {

public/sass/utils/_utils.scss

@@ -83,10 +83,18 @@ button.close {
   position: absolute;
   position: absolute;
 }
 }
 
 
-.flex-grow {
+.flex-grow-1 {
   flex-grow: 1;
   flex-grow: 1;
 }
 }
 
 
+.flex-shrink-1 {
+  flex-shrink: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .center-vh {
 .center-vh {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;