1 files changed, 27 insertions, 17 deletions
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 675e83c9f..9ef6eaf59 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -1,4 +1,4 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import FlatButton from 'material-ui/FlatButton';
@@ -6,11 +6,13 @@ 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';
+import { colors } from 'ts/utils/colors';
 
 export interface RelayerIndexProps {
     networkId: number;
+    screenWidth: ScreenWidths;
 }
 
 interface RelayerIndexState {
@@ -35,7 +37,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 = 1;
 const GRID_PADDING = 20;
 
 export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> {
@@ -59,27 +63,22 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos);
         if (!isReadyToRender) {
             return (
-                <div className="col col-12" style={{ ...styles.root, height: '100%' }}>
-                    <div
-                        className="relative sm-px2 sm-pt2 sm-m1"
-                        style={{ height: 122, top: '33%', transform: 'translateY(-50%)' }}
-                    >
-                        <div className="center pb2">
-                            {_.isUndefined(this.state.error) ? (
-                                <CircularProgress size={40} thickness={5} />
-                            ) : (
-                                <Retry onRetry={this._fetchRelayerInfosAsync.bind(this)} />
-                            )}
-                        </div>
-                    </div>
+                // TODO: consolidate this loading component with the one in portal
+                <div className="center">
+                    {_.isUndefined(this.state.error) ? (
+                        <CircularProgress size={40} thickness={5} />
+                    ) : (
+                        <Retry onRetry={this._fetchRelayerInfosAsync.bind(this)} />
+                    )}
                 </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}
                     >
@@ -113,6 +112,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 {