Select Team list container should scale in width based on browser win…

…dow 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.

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"

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'}

sass/responsive/_mobile.scss

@@ -1885,6 +1885,7 @@
  .signup-team-all {
  max-height: calc(75vh - (118px + 187px));
  }
+
 }
 
 @media screen and (max-width: 640px) {

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;