From bbc891178b49a20e405ac9092c8f802535754bcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Tue, 2 Oct 2018 13:04:34 +0200
Subject: [PATCH] put help icon next to heading

---
 .../packages/ui-components/src/Help.js           |  7 ++++---
 .../packages/ui-components/src/forms/Checkbox.js |  2 +-
 .../ui-components/src/forms/InputField.js        | 16 +++++++++-------
 .../packages/ui-components/src/forms/Textarea.js | 10 ++++++----
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/Help.js b/scm-ui-components/packages/ui-components/src/Help.js
index b0dca9cb56..73de63b38b 100644
--- a/scm-ui-components/packages/ui-components/src/Help.js
+++ b/scm-ui-components/packages/ui-components/src/Help.js
@@ -9,8 +9,9 @@ const styles = {
   },
   q: {
     float: "left",
-    paddingLeft: "3px"
-  }
+    paddingLeft: "3px",
+    float: "right"
+}
 };
 
 type Props = {
@@ -22,7 +23,7 @@ class Help extends React.Component<Props> {
   render() {
     const { message, classes } = this.props;
     return (
-        <div className={classNames("tooltip is-tooltip-right", classes.q)}
+        <div className={classNames("tooltip is-tooltip-right is-tooltip-multiline", classes.q)}
              data-tooltip={message}>
         <i className={classNames("fa fa-question has-text-info", classes.img)}></i>
         </div>
diff --git a/scm-ui-components/packages/ui-components/src/forms/Checkbox.js b/scm-ui-components/packages/ui-components/src/forms/Checkbox.js
index 0d649c9305..f1637ba607 100644
--- a/scm-ui-components/packages/ui-components/src/forms/Checkbox.js
+++ b/scm-ui-components/packages/ui-components/src/forms/Checkbox.js
@@ -31,7 +31,7 @@ class Checkbox extends React.Component<Props> {
   render() {
     return (
       <div className="field is-grouped">
-        <div className="control is-expanded">
+        <div className="control">
           <label className="checkbox" disabled={this.props.disabled}>
             <input
               type="checkbox"
diff --git a/scm-ui-components/packages/ui-components/src/forms/InputField.js b/scm-ui-components/packages/ui-components/src/forms/InputField.js
index 6b9a857c0d..83d79ce43b 100644
--- a/scm-ui-components/packages/ui-components/src/forms/InputField.js
+++ b/scm-ui-components/packages/ui-components/src/forms/InputField.js
@@ -82,10 +82,14 @@ class InputField extends React.Component<Props> {
       ""
     );
     return (
-      <div className="field">
-        {this.renderLabel()}
-        <div className="field is-grouped">
-          <div className="control is-expanded">
+        <div className="field">
+          <div className="field is-grouped">
+            <div className="control">
+              {this.renderLabel()}
+            </div>
+            {this.renderHelp()}
+          </div>
+          <div className="control">
             <input
               ref={input => {
                 this.field = input;
@@ -99,9 +103,7 @@ class InputField extends React.Component<Props> {
               disabled={disabled}
             />
           </div>
-          {this.renderHelp()}
-        </div>
-        {helper}
+          {helper}
       </div>
     );
   }
diff --git a/scm-ui-components/packages/ui-components/src/forms/Textarea.js b/scm-ui-components/packages/ui-components/src/forms/Textarea.js
index c0b5c1bc60..2239581f0e 100644
--- a/scm-ui-components/packages/ui-components/src/forms/Textarea.js
+++ b/scm-ui-components/packages/ui-components/src/forms/Textarea.js
@@ -47,9 +47,13 @@ class Textarea extends React.Component<Props> {
 
     return (
       <div className="field">
-        {this.renderLabel()}
         <div className="field is-grouped">
-        <div className="control is-expanded">
+          <div className="control">
+            {this.renderLabel()}
+          </div>
+          {this.renderHelp()}
+        </div>
+        <div className="control">
           <textarea
             className="textarea"
             ref={input => {
@@ -60,8 +64,6 @@ class Textarea extends React.Component<Props> {
             value={value}
           />
         </div>
-          {this.renderHelp()}
-        </div>
       </div>
     );
   }