From 750b9a5a88e2264d601affa6005837f6ff192307 Mon Sep 17 00:00:00 2001
From: GraysonNull <graysonnull@me.com>
Date: Wed, 29 Apr 2020 16:00:58 -0500
Subject: [PATCH 1/3] select many help text respects container

---
 web/init/src/components/config_render/ConfigCheckbox.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/init/src/components/config_render/ConfigCheckbox.jsx b/web/init/src/components/config_render/ConfigCheckbox.jsx
index e6840300c..9d24198d5 100644
--- a/web/init/src/components/config_render/ConfigCheckbox.jsx
+++ b/web/init/src/components/config_render/ConfigCheckbox.jsx
@@ -24,7 +24,7 @@ export default class ConfigCheckbox extends React.Component {
     return (
       <div className={`field field-checkbox-wrapper u-marginTop--15 flex ${hidden ? "hidden" : ""}`}>
         <span className="u-marginTop--10 config-errblock" id={`${this.props.name}-errblock`}></span>
-        <div className="flex-auto flex u-marginRight--20">
+        <div className="flex1 flex u-marginRight--20">
           <input
             ref={(checkbox) => this.checkbox = checkbox}
             type="checkbox"

From 73aa7dcd275834c27534581413f08886946f43f1 Mon Sep 17 00:00:00 2001
From: GraysonNull <graysonnull@me.com>
Date: Wed, 29 Apr 2020 16:36:18 -0500
Subject: [PATCH 2/3] better wrapping of select many components

---
 web/init/src/components/config_render/ConfigRadio.jsx     | 2 +-
 web/init/src/components/config_render/ConfigSelectOne.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/init/src/components/config_render/ConfigRadio.jsx b/web/init/src/components/config_render/ConfigRadio.jsx
index e16579d5c..6b6441087 100644
--- a/web/init/src/components/config_render/ConfigRadio.jsx
+++ b/web/init/src/components/config_render/ConfigRadio.jsx
@@ -19,7 +19,7 @@ export default class ConfigRadio extends React.Component {
     const checked = val === this.props.name;
 
     return (
-      <div className="flex-auto flex alignItems--center u-marginRight--20">
+      <div className="flex-auto flex alignItems--center u-marginRight--20 u-marginTop--10">
         <input
           type="radio"
           name={this.props.group}
diff --git a/web/init/src/components/config_render/ConfigSelectOne.jsx b/web/init/src/components/config_render/ConfigSelectOne.jsx
index 284fbd216..ef5d9db64 100644
--- a/web/init/src/components/config_render/ConfigSelectOne.jsx
+++ b/web/init/src/components/config_render/ConfigSelectOne.jsx
@@ -57,7 +57,7 @@ export default class ConfigSelectOne extends React.Component {
             </Markdown>
           </p>
         : null}
-        <div className="field-input-wrapper u-marginTop--15 flex flexWrap--wrap">
+        <div className="field-input-wrapper u-marginTop--5 flex flexWrap--wrap">
           {options}
         </div>
       </div>

From 7f254abc7ba0ccf16a1fec138e90526ea01ae09b Mon Sep 17 00:00:00 2001
From: GraysonNull <graysonnull@me.com>
Date: Wed, 29 Apr 2020 16:58:53 -0500
Subject: [PATCH 3/3] display file name after it's been uploaded, get rid of
 file text

---
 web/init/src/components/config_render/FileInput.jsx | 11 ++++-------
 web/init/src/scss/utilities/forms.scss              |  2 --
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/web/init/src/components/config_render/FileInput.jsx b/web/init/src/components/config_render/FileInput.jsx
index 7245eaa54..e4c912a4c 100644
--- a/web/init/src/components/config_render/FileInput.jsx
+++ b/web/init/src/components/config_render/FileInput.jsx
@@ -79,15 +79,12 @@ export default class FileInput extends React.Component {
               />
               <label htmlFor={`${this.props.name} selector`} className="u-position--relative">
                 <span className={`icon clickable ${this.state.fileAdded || this.props.value ? "u-smallCheckGreen" : "u-ovalIcon"} u-marginRight--normal u-top--3`}></span>
-                {this.state.fileAdded || this.props.value ? `${this.props.title} file selected` : `Browse files for ${this.props.title}`}
+                {this.state.fileAdded || this.props.value ? this.props.multiple ? this.state.fileNames.join(",") : this.state.fileName : `Browse files for ${this.props.title}`}
+                {this.state.fileAdded || this.props.value ? 
+                  <p className="u-color--astral u-textDecoration--underlineOnHover u-fontSize--small u-marginLeft--30 u-marginTop--5">Select a different file</p>
+                : null }
               </label>
             </div>
-            {this.state.fileAdded || this.props.value ?
-              <div className="u-color--tuna u-marginLeft--normal"> File uploaded:
-              <p className="Form-label-subtext"> {this.props.multiple ? this.state.fileNames.join(",") : this.state.fileName} </p>
-                <p className="Form-label-subtext"> {this.props.getFilenamesText} </p>
-              </div>
-              : null}
           </div>
         </div>
         <small className="text-danger"> {this.state.errText}</small>
diff --git a/web/init/src/scss/utilities/forms.scss b/web/init/src/scss/utilities/forms.scss
index 2daa468f7..770eef38b 100644
--- a/web/init/src/scss/utilities/forms.scss
+++ b/web/init/src/scss/utilities/forms.scss
@@ -84,7 +84,6 @@ input[type="file"] {
   display: inline-block;
   padding: 15px 17px;
   cursor: pointer;
-  width: 249px;
   border-radius: 4px;
 }
 
@@ -93,7 +92,6 @@ input[type="file"] {
   display: inline-block;
   padding: 15px 17px;
   cursor: pointer;
-  width: 249px;
   border-radius: 4px;
   color: #323232;
 }