Modulate number of columns based on screenwidth

2 files changed, 19 insertions, 4 deletions

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index d9d50c5ab..9b1fe69a3 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -383,7 +383,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         return (
             <Section
                 header={<TextHeader labelText="Explore 0x Relayers" />}
-                body={<RelayerIndex networkId={this.props.networkId} />}
+                body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />}
             />
         );
     }
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index b327c9817..9e028fc06 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -6,11 +6,12 @@ import { GridList } from 'material-ui/GridList';
 import * as React from 'react';
 
 import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
-import { WebsiteBackendRelayerInfo } from 'ts/types';
+import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
 
 export interface RelayerIndexProps {
     networkId: number;
+    screenWidth: ScreenWidths;
 }
 
 interface RelayerIndexState {
@@ -35,7 +36,9 @@ const styles: Styles = {
 };
 
 const CELL_HEIGHT = 290;
-const NUMBER_OF_COLUMNS = 4;
+const NUMBER_OF_COLUMNS_LARGE = 4;
+const NUMBER_OF_COLUMNS_MEDIUM = 3;
+const NUMBER_OF_COLUMNS_SMALL = 2;
 const GRID_PADDING = 20;
 
 export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> {
@@ -69,11 +72,12 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
                 </div>
             );
         } else {
+            const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
             return (
                 <div style={styles.root}>
                     <GridList
                         cellHeight={CELL_HEIGHT}
-                        cols={NUMBER_OF_COLUMNS}
+                        cols={numberOfColumns}
                         padding={GRID_PADDING}
                         style={styles.gridList}
                     >
@@ -107,6 +111,17 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
             }
         }
     }
+    private _numberOfColumnsForScreenWidth(screenWidth: ScreenWidths): number {
+        switch (screenWidth) {
+            case ScreenWidths.Md:
+                return NUMBER_OF_COLUMNS_MEDIUM;
+            case ScreenWidths.Sm:
+                return NUMBER_OF_COLUMNS_SMALL;
+            case ScreenWidths.Lg:
+            default:
+                return NUMBER_OF_COLUMNS_LARGE;
+        }
+    }
 }
 
 interface RetryProps {