#264 Fix styling on GitLab URL to grow. Fix margin between help button and GitLab URL

Author: joejag

src/client/backup/export/gitlab/GitLab.js

@@ -19,6 +19,7 @@ export function GitLab({loaded, snippetId, url, gitLabSetSnippetId, gitLabSetUrl
   return (
     <>
       <WithHelp title='Export to GitLab'
+                containerClassName={styles.helpContainer}
                 help={<GitLabHelp/>}>
         <GitLabUrlInput key={url}
                         url={url}

src/client/backup/export/gitlab/gitlab.scss

@@ -17,6 +17,6 @@ $label-size: 6em;
   }
 }
 
-.help {
-  margin: 0 $margin-right 0 0;
+.helpContainer {
+  display: flex;
 }

src/client/backup/import/gitlab/GitLab.js

@@ -19,6 +19,7 @@ export function GitLab({snippetId, gitLabSetSnippetId, url, gitLabSetUrl, loaded
   return (
     <>
       <WithHelp title='Import from GitLab'
+                containerClassName={styles.help}
                 help={<GitLabHelp/>}>
         <GitLabUrlInput key={url}
                         url={url}

src/client/backup/import/gitlab/gitlab.scss

@@ -17,3 +17,7 @@ $label-size: 6em;
     width: 36em;
   }
 }
+
+.help {
+  display: flex;
+}

src/client/backup/snippet-id-input.scss

@@ -7,6 +7,9 @@
 
 .url {
   @extend %first;
+
+  flex-grow: 1;
+  margin: 0 1em 0 0;
 }
 
 .snippet {

src/client/common/ContextualHelp.js

@@ -37,9 +37,9 @@ ContextualHelp.propTypes = {
   className: PropTypes.string
 }
 
-export function WithHelp({help, title, className, children}) {
+export function WithHelp({help, title, containerClassName, className, children}) {
   return (
-    <div className={styles.inline}>
+    <div className={cn(styles.inline, containerClassName)}>
       {children}
       <ContextualHelp title={title} help={help} className={className}/>
     </div>
@@ -49,6 +49,7 @@ export function WithHelp({help, title, className, children}) {
 WithHelp.propTypes = {
   title: PropTypes.string.isRequired,
   help: PropTypes.element.isRequired,
+  containerClassName: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.node.isRequired
 }