diff --git a/src/App.css b/src/App.css index b3004ac40734d1b05cd893b254948d77559da7dc..c22f442f3c1f1f3608c1605b7784a026aa79f0b4 100644 --- a/src/App.css +++ b/src/App.css @@ -212,8 +212,12 @@ div.login button:hover { } .gamelist { + border: 2px solid white; + max-width: 800px; +} + +.gamelist-item { background-color: #1d1d1b; - max-width: 500px; padding: 10px; } diff --git a/src/components/GameList.js b/src/components/GameList.js index fcb3091c15867045b985157192b864789dabc204..4796e8a1c3dfe575f9efded6b02c2017ece1e8eb 100644 --- a/src/components/GameList.js +++ b/src/components/GameList.js @@ -80,20 +80,21 @@ class GameList extends React.Component { }; render() { - let gamelistItems = this.props.games.map(game => { - return ( - <GameCard - key={game.id} - gameId={game.id} - onEditSave={this.props.onEditSave} - /> - ); - }); + let gamelistItems = this.props.games.map(game => ( + <GameCard + key={game.id} + gameId={game.id} + onEditSave={this.props.onEditSave} + /> + )); return ( - <Fragment> - <div className="gamelist">{gamelistItems}</div> - </Fragment> + <div + className="gamelist" + style={{ maxHeight: "500px", overflow: "scroll" }} + > + <div className="gamelist-item">{gamelistItems}</div> + </div> ); } }