From c34360f2fb9ae30a5ff8fad04cc452f9537368ca Mon Sep 17 00:00:00 2001
From: adeelehsan <adeel.ehsan@arbisoft.com>
Date: Wed, 27 Oct 2021 23:24:29 +0500
Subject: [PATCH] scroll added for username suggestions

---
 src/_style.scss                |  6 ++++++
 src/register/UsernameField.jsx | 26 ++++++++++++++------------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/_style.scss b/src/_style.scss
index 72f7d0c9..91ed9389 100644
--- a/src/_style.scss
+++ b/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;
+}
diff --git a/src/register/UsernameField.jsx b/src/register/UsernameField.jsx
index ff7c7d8a..a135ccad 100644
--- a/src/register/UsernameField.jsx
+++ b/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>
   );