fix bouncing help icons on mobiles devices

scm-ui-components/packages/ui-components/src/forms/Checkbox.js

@@ -10,7 +10,9 @@ type Props = {
   disabled?: boolean,
   helpText?: string
 };
+
 class Checkbox extends React.Component<Props> {
+
   onCheckboxChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
     if (this.props.onChange) {
       this.props.onChange(event.target.checked, this.props.name);
@@ -20,12 +22,8 @@ class Checkbox extends React.Component<Props> {
   renderHelp = () => {
     const helpText = this.props.helpText;
     if (helpText) {
-      return (
-        <div className="control columns is-vcentered">
-          <Help message={helpText} />
-        </div>
-      );
-    } else return null;
+      return <Help message={helpText} />;
+    }
   };
 
   render() {
@@ -39,10 +37,11 @@ class Checkbox extends React.Component<Props> {
               onChange={this.onCheckboxChange}
               disabled={this.props.disabled}
             />
+            {" "}
             {this.props.label}
+            {this.renderHelp()}
           </label>
         </div>
-        {this.renderHelp()}
       </div>
     );
   }

scm-ui-components/packages/ui-components/src/forms/InputField.js

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import classNames from "classnames";
-import { LabelWithHelpIcon } from "../index";
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 type Props = {
   label?: string,

scm-ui-components/packages/ui-components/src/forms/LabelWithHelpIcon.js

@@ -0,0 +1,37 @@
+//@flow
+import React from "react";
+import Help from '../Help';
+
+type Props = {
+  label?: string,
+  helpText?: string
+};
+
+class LabelWithHelpIcon extends React.Component<Props> {
+
+  renderHelp() {
+    const { helpText } = this.props;
+    if (helpText) {
+      return (
+        <Help message={helpText} />
+      );
+    }
+  }
+
+  render() {
+    const {label } = this.props;
+
+    if (label) {
+      const help = this.renderHelp();
+      return (
+        <label className="label">
+          {label} { help }
+        </label>
+      );
+    }
+
+    return "";
+  }
+}
+
+export default LabelWithHelpIcon;

scm-ui-components/packages/ui-components/src/forms/Select.js

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import classNames from "classnames";
-import { LabelWithHelpIcon } from "../index";
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 export type SelectItem = {
   value: string,

scm-ui-components/packages/ui-components/src/forms/Textarea.js

@@ -1,6 +1,6 @@
 //@flow
 import React from "react";
-import { LabelWithHelpIcon } from "../index";
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 export type SelectItem = {
   value: string,

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -5,4 +5,5 @@ export { default as Checkbox } from "./Checkbox.js";
 export { default as InputField } from "./InputField.js";
 export { default as Select } from "./Select.js";
 export { default as Textarea } from "./Textarea.js";
+export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon";