From e4832fa1eea1faed5a344349121cffa20271067a Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 1 Jun 2020 10:52:57 +0200
Subject: [PATCH] Explore: Fix very narrow Query fields on mobile (#25148)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../datasource/loki/components/LokiExploreExtraField.tsx  | 6 +++---
 .../datasource/loki/components/LokiQueryFieldForm.tsx     | 4 ++--
 .../__snapshots__/LokiExploreExtraField.test.tsx.snap     | 6 +++---
 .../prometheus/components/PromExploreExtraField.tsx       | 2 +-
 .../datasource/prometheus/components/PromQueryField.tsx   | 4 ++--
 .../__snapshots__/PromExploreExtraField.test.tsx.snap     | 2 +-
 public/sass/components/_gf-form.scss                      | 8 ++++++++
 public/sass/components/_slate_editor.scss                 | 6 +++++-
 public/sass/pages/_explore.scss                           | 7 +++++--
 9 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiExploreExtraField.tsx b/public/app/plugins/datasource/loki/components/LokiExploreExtraField.tsx
index 3b995eda532..61a32a2ce2c 100644
--- a/public/app/plugins/datasource/loki/components/LokiExploreExtraField.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx b/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
index 755bbbd0d14..f0e9518bff8 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreExtraField.test.tsx.snap b/public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreExtraField.test.tsx.snap
index 152aa117b28..0a968e90b02 100644
--- a/public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreExtraField.test.tsx.snap
+++ b/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]}
diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
index ae3ea26c2fc..3821e83bba7 100644
--- a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
index f56686f96da..df58d07cfb4 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreExtraField.test.tsx.snap b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreExtraField.test.tsx.snap
index 9bc6d1896f1..d09d8b51073 100644
--- a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreExtraField.test.tsx.snap
+++ b/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"
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 9d7e204c2c2..83c58374685 100644
--- a/public/sass/components/_gf-form.scss
+++ b/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;
   }
diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss
index 010180aa4e6..cc1c94ac7d6 100644
--- a/public/sass/components/_slate_editor.scss
+++ b/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;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 6c32320a79e..725b32f5a8f 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -242,8 +242,8 @@
   }
 }
 
-.explore-input--ml {
-  margin-left: 4px;
+.explore-input-margin {
+  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;