Improve username modal

src/components/tw-username-modal/username-modal.css

@@ -1,7 +1,7 @@
 @import "../../css/colors.css";
 
 .modal-content {
-    width: 360px;
+    width: 400px;
 }
 
 .body {

src/components/tw-username-modal/username-modal.jsx

@@ -68,6 +68,14 @@ const UsernameModalComponent = props => (
                     id="tw.usernameModal.help"
                 />
             </p>
+            <p className={styles.helpText}>
+                <FormattedMessage
+                    // eslint-disable-next-line max-len
+                    defaultMessage="It is recommended to leave this value as-is or change it to your Scratch username, as other values may be unusable with cloud variables."
+                    description="Text in change username modal"
+                    id="tw.usernameModal.help2"
+                />
+            </p>
             <Box className={styles.buttonRow}>
                 <button
                     className={styles.cancelButton}