From 71415604129f71850cbb9cb92b05ea14e809d52c Mon Sep 17 00:00:00 2001
From: Sridhar <kattasridhar02@gmail.com>
Date: Wed, 22 Jul 2020 17:13:33 +0530
Subject: [PATCH] Select Team list container should scale in width based on
 browser window width #14197 (#5833)

* changed the signup team container max width

* added the scroll property in mobile view currently which is overriding due to infinite-scroll overflow hidden property

* reverted signup team container width to 400px and added new class with max width 800px for the team container

* snapshot updated

* remove the unnecessary class name as overflowY is applied on the hover over team list.
---
 .../__snapshots__/select_team.test.jsx.snap          | 12 ++++++------
 components/select_team/select_team.jsx               |  2 +-
 sass/responsive/_mobile.scss                         |  1 +
 sass/routes/_signup.scss                             |  4 ++++
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/components/select_team/__snapshots__/select_team.test.jsx.snap b/components/select_team/__snapshots__/select_team.test.jsx.snap
index cf0703939b74..02e33d040d4d 100644
--- a/components/select_team/__snapshots__/select_team.test.jsx.snap
+++ b/components/select_team/__snapshots__/select_team.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`components/select_team/SelectTeam should match snapshot 1`] = `
     className="col-sm-12"
   >
     <div
-      className="signup-team__container"
+      className="select-team__container signup-team__container"
     >
       <img
         alt="signup team logo"
@@ -127,7 +127,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on error 1`] =
     className="col-sm-12"
   >
     <div
-      className="signup-team__container"
+      className="select-team__container signup-team__container"
     >
       <img
         alt="signup team logo"
@@ -217,7 +217,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on loading 1`]
     className="col-sm-12"
   >
     <div
-      className="signup-team__container"
+      className="select-team__container signup-team__container"
     >
       <img
         alt="signup team logo"
@@ -298,7 +298,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
     className="col-sm-12"
   >
     <div
-      className="signup-team__container"
+      className="select-team__container signup-team__container"
     >
       <img
         alt="signup team logo"
@@ -436,7 +436,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
     className="col-sm-12"
   >
     <div
-      className="signup-team__container"
+      className="select-team__container signup-team__container"
     >
       <img
         alt="signup team logo"
@@ -530,7 +530,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
     className="col-sm-12"
   >
     <div
-      className="signup-team__container"
+      className="select-team__container signup-team__container"
     >
       <img
         alt="signup team logo"
diff --git a/components/select_team/select_team.jsx b/components/select_team/select_team.jsx
index 6c5fbc332f37..e28cebec6a7f 100644
--- a/components/select_team/select_team.jsx
+++ b/components/select_team/select_team.jsx
@@ -336,7 +336,7 @@ export default class SelectTeam extends React.PureComponent {
                 {headerButton}
                 <div className='col-sm-12'>
                     <div
-                        className={'signup-team__container'}
+                        className={'select-team__container signup-team__container'}
                     >
                         <img
                             alt={'signup team logo'}
diff --git a/sass/responsive/_mobile.scss b/sass/responsive/_mobile.scss
index 9577910bcdfb..af3a87ea7dc2 100644
--- a/sass/responsive/_mobile.scss
+++ b/sass/responsive/_mobile.scss
@@ -1885,6 +1885,7 @@
     .signup-team-all {
         max-height: calc(75vh - (118px + 187px));
     }
+    
 }
 
 @media screen and (max-width: 640px) {
diff --git a/sass/routes/_signup.scss b/sass/routes/_signup.scss
index 374925d67d98..a4ebb8345929 100644
--- a/sass/routes/_signup.scss
+++ b/sass/routes/_signup.scss
@@ -482,6 +482,10 @@ body {
     }
 }
 
+.select-team__container {
+    max-width: 800px;
+}
+
 .signup-team-all {
     @include border-radius(2px);
     border: 1px solid #dddddd;