From 103ed5cbd7b912cb8eae2e89e42075e7a90a461f Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Thu, 20 Oct 2016 18:09:20 -0400
Subject: [PATCH] max at 4, use fewer if not enough maps

---
 frontend/src/components/Maps/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Maps/index.js b/frontend/src/components/Maps/index.js
index 9326c6c1..ecc991d9 100644
--- a/frontend/src/components/Maps/index.js
+++ b/frontend/src/components/Maps/index.js
@@ -4,6 +4,7 @@ import MapperCard from './MapperCard'
 import MapCard from './MapCard'
 
 const MAP_WIDTH = 252
+const MAX_COLUMNS = 4
 
 class Maps extends Component {
 
@@ -17,13 +18,20 @@ class Maps extends Component {
     this.resize()
   }
 
+  componentDidUpdate() {
+    this.resize()
+  }
+
   componentWillUnmount() {
     window && window.removeEventListener('resize', this.resize)
   }
 
   resize = () => {
+    const { maps, user, currentUser } = this.props
+    const numCards = maps.length + (user || currentUser ? 1 : 0)
     const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH)
-    this.setState({ mapsWidth: mapSpaces * MAP_WIDTH })
+    const mapsWidth = Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH
+    this.setState({ mapsWidth })
   }
 
   render = () => {