Merge pull request #4455 from grafana/g3-app-improvements

Form adjustments for app work

public/sass/components/_gf-form.scss

@@ -50,6 +50,12 @@ $gf-form-label-margin: 0.25rem;
   @include border-radius($label-border-radius-sm);
 }
 
+.gf-form-label--textarea {
+  line-height: $input-line-height * 2;
+  padding-top: 0px;
+  padding-bottom: 16px; // $spacer (1rem) was slightly too short.
+}
+
 .gf-form-checkbox {
   flex-shrink: 0;
   padding: $input-padding-y $input-padding-x;
@@ -67,6 +73,7 @@ $gf-form-label-margin: 0.25rem;
   display: block;
   width: 100%;
   padding: $input-padding-y $input-padding-x;
+  margin-right: $gf-form-label-margin;
   font-size: $font-size-base;
   line-height: $input-line-height;
   color: $input-color;
@@ -111,6 +118,7 @@ $gf-form-label-margin: 0.25rem;
 .gf-form-select-wrapper {
   position: relative;
   background-color: $input-bg;
+  margin-right: $gf-form-label-margin;
 
   select.gf-form-input {
     text-indent: .01px;
@@ -139,8 +147,15 @@ $gf-form-label-margin: 0.25rem;
   }
 }
 
-.gf-form-select-wrapper + .gf-form-select-wrapper { 
-  margin-left: $gf-form-label-margin; 
+.gf-form--textarea {
+  align-items: flex-start;
+}
+
+input[type="number"].gf-natural-language-form {
+  font-size: $font-size-base;
+  line-height: $input-line-height;
+  margin: -6px -5px 0 5px;
+  padding: $input-padding-y/2 $input-padding-x/2;
 }
 
 .gf-form-btn {