Explore: Fix very narrow Query fields on mobile (#25148)

* Fix Loki and Prometheus query fields on mobile devices

* Add min widt to Elasticsearch Query Field

* Remove width for Elastic, works nicely without updating it

* Update public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

public/app/plugins/datasource/loki/components/LokiExploreExtraField.tsx

@@ -17,12 +17,12 @@ export function LokiExploreExtraField(props: LokiExploreExtraFieldProps) {
   const { label, onChangeFunc, onKeyDownFunc, value, type, min } = props;
 
   return (
-    <div className="gf-form-inline explore-input--ml">
+    <div className="gf-form-inline">
       <div className="gf-form">
-        <InlineFormLabel width={6}>{label}</InlineFormLabel>
+        <InlineFormLabel width={5}>{label}</InlineFormLabel>
         <input
           type={type}
-          className="gf-form-input width-6"
+          className="gf-form-input width-4"
           placeholder={'auto'}
           onChange={onChangeFunc}
           onKeyDown={onKeyDownFunc}

public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx

@@ -152,7 +152,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
 
     return (
       <>
-        <div className="gf-form-inline gf-form-inline--nowrap flex-grow-1">
+        <div className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1">
           <div className="gf-form flex-shrink-0">
             <ButtonCascader
               options={logLabelOptions || []}
@@ -164,7 +164,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
               {chooserText}
             </ButtonCascader>
           </div>
-          <div className="gf-form gf-form--grow flex-shrink-1">
+          <div className="gf-form gf-form--grow flex-shrink-1 min-width-15 explore-input-margin">
             <QueryField
               additionalPlugins={this.plugins}
               cleanText={cleanText}

public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreExtraField.test.tsx.snap

@@ -2,18 +2,18 @@
 
 exports[`LokiExploreExtraField should render component 1`] = `
 <div
-  className="gf-form-inline explore-input--ml"
+  className="gf-form-inline"
 >
   <div
     className="gf-form"
   >
     <Component
-      width={6}
+      width={5}
     >
       Loki Explore Extra Field
     </Component>
     <input
-      className="gf-form-input width-6"
+      className="gf-form-input width-4"
       min={0}
       onChange={[MockFunction]}
       onKeyDown={[MockFunction]}

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

@@ -17,7 +17,7 @@ export function PromExploreExtraField(props: PromExploreExtraFieldProps) {
   const { label, onChangeFunc, onKeyDownFunc, value, hasTooltip, tooltipContent } = props;
 
   return (
-    <div className="gf-form-inline explore-input--ml" aria-label="Prometheus extra field">
+    <div className="gf-form-inline" aria-label="Prometheus extra field">
       <div className="gf-form">
         <InlineFormLabel width={5} tooltip={hasTooltip ? tooltipContent : null}>
           {label}

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

@@ -324,13 +324,13 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
 
     return (
       <>
-        <div className="gf-form-inline gf-form-inline--nowrap flex-grow-1">
+        <div className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1">
           <div className="gf-form flex-shrink-0">
             <ButtonCascader options={metricsOptions} disabled={buttonDisabled} onChange={this.onChangeMetrics}>
               {chooserText}
             </ButtonCascader>
           </div>
-          <div className="gf-form gf-form--grow flex-shrink-1">
+          <div className={'gf-form gf-form--grow flex-shrink-1 min-width-15 explore-input-margin'}>
             <QueryField
               additionalPlugins={this.plugins}
               cleanText={cleanText}

public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreExtraField.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`PrometheusExploreExtraField should render component 1`] = `
 <div
   aria-label="Prometheus extra field"
-  className="gf-form-inline explore-input--ml"
+  className="gf-form-inline"
 >
   <div
     className="gf-form"

public/sass/components/_gf-form.scss

@@ -87,6 +87,14 @@ $input-border: 1px solid $input-border-color;
     flex-wrap: nowrap;
   }
 
+  &--xs-view-flex-column {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    @include media-breakpoint-down(xs) {
+      flex-direction: column;
+    }
+  }
+
   .select-container {
     margin-right: $space-xs;
   }

public/sass/components/_slate_editor.scss

@@ -3,6 +3,10 @@
   font-family: $font-family-monospace;
   height: auto;
   word-break: break-word;
+  overflow: scroll;
+  &::placeholder {
+    overflow: scroll;
+  }
 }
 
 .slate-query-field__wrapper {
@@ -16,7 +20,7 @@
   color: $text-color;
   background-color: $input-bg;
   background-image: none;
-  border: $panel-border;
+  border: $input-border;
   border-radius: $border-radius;
   transition: all 0.3s;
   line-height: $input-line-height;

public/sass/pages/_explore.scss

@@ -242,8 +242,8 @@
   }
 }
 
-.explore-input--ml {
+.explore-input-margin {
-  margin-left: 4px;
+  margin-right: 4px;
 }
 
 .navbar .elapsed-time {
@@ -263,6 +263,9 @@
   display: flex;
   position: relative;
   align-items: flex-start;
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+  }
 
   & + & {
     margin-top: $space-sm;