improved support for displaying a large number of spaces

x-pack/package.json

@@ -75,7 +75,7 @@
     "yargs": "4.7.1"
   },
   "dependencies": {
-    "@elastic/eui": "0.0.44",
+    "@elastic/eui": "0.0.47",
     "@elastic/node-crypto": "0.1.2",
     "@elastic/node-phantom-simple": "2.2.4",
     "@elastic/numeral": "2.3.2",

x-pack/plugins/spaces/public/views/components/space_card.js

@@ -7,7 +7,6 @@
 import React from 'react';
 import {
   EuiCard,
-  EuiAvatar,
   EuiText
 } from '@elastic/eui';
 import './space_card.less';
@@ -22,7 +21,7 @@ export const SpaceCard = (props) => {
     <EuiCard
       className="spaceCard"
       title={renderSpaceTitle(space)}
-      description={space.description}
+      description={renderSpaceDescription(space)}
       onClick={onClick}
     />
   );
@@ -31,8 +30,13 @@ export const SpaceCard = (props) => {
 function renderSpaceTitle(space) {
   return (
     <div className="spaceCardTitle">
-      <EuiAvatar name={space.name} size="m" />
       <EuiText><h3>{space.name}</h3></EuiText>
     </div>
   );
-}
+}
+
+function renderSpaceDescription(space) {
+  return (
+    <EuiText className="spaceCardDescription"><p>{space.description}</p></EuiText>
+  );
+}

x-pack/plugins/spaces/public/views/components/space_card.less

@@ -1,3 +1,9 @@
 .spaceCard, .euiCard.euiCard--isClickable.spaceCard {
-    width: 225px;
+    width: 310px;
+    height: 230px;
+    min-height: 200px;
+}
+
+.spaceCardDescription {
+  margin-bottom: 10px;
 }

x-pack/plugins/spaces/public/views/components/space_cards.js

@@ -4,22 +4,37 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import chrome from 'ui/chrome';
 import { SpaceCard } from './space_card';
 import { stripSpaceUrlContext } from '../../../common/spaces_url_parser';
 import {
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSpacer,
 } from '@elastic/eui';
+import { chunk } from 'lodash';
 
 export class SpaceCards extends Component {
   render() {
+    const maxSpacesPerRow = 3;
+    const rows = chunk(this.props.spaces, maxSpacesPerRow);
+
     return (
-      <EuiFlexGroup gutterSize="l" justifyContent="spaceEvenly" className="spacesGroup">
-        {this.props.spaces.map(this.renderSpace)}
-      </EuiFlexGroup>
+      <Fragment>
+        {
+          rows.map((row, idx) => (
+            <Fragment key={idx}>
+              <EuiFlexGroup gutterSize="l" justifyContent="spaceEvenly">
+                {row.map(this.renderSpace)}
+              </EuiFlexGroup>
+              <EuiSpacer />
+            </Fragment>
+          ))
+        }
+      </Fragment>
+
     );
   }
 

x-pack/plugins/spaces/public/views/nav_control/nav_control.less

@@ -4,5 +4,5 @@
 
 .selectSpaceModal {
   min-width: 450px;
-  width: 75vw;
+  max-width: 1200px;
 }

x-pack/plugins/spaces/public/views/space_selector/space_selector.js

@@ -13,7 +13,9 @@ import {
   EuiPageContent,
   EuiPageHeaderSection,
   EuiIcon,
+  EuiSpacer,
   EuiText,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { SpaceCards } from '../components/space_cards';
 
@@ -62,17 +64,18 @@ export class SpaceSelector extends Component {
           </EuiPageHeaderSection>
         </EuiPageHeader>
         <EuiPageBody>
-          <EuiPageContent>
+          <EuiPageContent className="spaceSelectorPageContent">
             <EuiText className="spaceWelcomeText">
               <p className="welcomeLarge">Welcome to Kibana.</p>
               <p className="welcomeMedium">Select a space to begin.</p>
             </EuiText>
 
+            <EuiHorizontalRule />
+
             <SpaceCards spaces={spaces} />
 
-            <EuiText className="spaceProfileText">
-              <p>You can change your workspace at anytime by accessing your profile within Kibana.</p>
-            </EuiText>
+            <EuiSpacer />
+
           </EuiPageContent>
         </EuiPageBody>
       </EuiPage>

x-pack/plugins/spaces/public/views/space_selector/space_selector.less

@@ -23,3 +23,8 @@
 .welcomeMedium {
   font-size: 1.4em;
 }
+
+.spaceSelectorPageContent {
+  box-shadow: none;
+  border: none;
+}