Merge pull request #458 from edx/aehsan/scroll_added_for_username_suggestion

scroll added for username suggestions

src/_style.scss

@@ -862,3 +862,9 @@ select.form-control {
   margin-bottom: 11%;
   margin-left: 15px;
 }
+.scroll-suggested-username {
+  width: 21rem;
+  white-space: nowrap;
+  overflow-x: auto;
+  display: inline-flex;
+}

src/register/UsernameField.jsx

@@ -16,18 +16,20 @@ const UsernameField = (props) => {
   const suggestedUsernames = () => (
     <div className={className}>
       <span className="text-gray username-suggestion-label">{intl.formatMessage(messages['registration.username.suggestion.label'])}</span>
-      {usernameSuggestions.map((username, index) => (
-        <Button
-          type="button"
-          name="username"
-          variant="outline-dark"
-          className="username-suggestion data-hj-suppress"
-          key={`suggestion-${index.toString()}`}
-          onClick={(e) => props.handleSuggestionClick(e, username)}
-        >
-          {username}
-        </Button>
-      ))}
+      <div className="scroll-suggested-username">
+        {usernameSuggestions.map((username, index) => (
+          <Button
+            type="button"
+            name="username"
+            variant="outline-dark"
+            className="username-suggestion data-hj-suppress"
+            key={`suggestion-${index.toString()}`}
+            onClick={(e) => props.handleSuggestionClick(e, username)}
+          >
+            {username}
+          </Button>
+        ))}
+      </div>
       {iconButton}
     </div>
   );