When number of relayers is less than number of columns, reduce column number to number of relayers

1 files changed, 5 insertions, 1 deletions

diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 4aea1bbbb..91dbeb27a 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -56,7 +56,11 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
                 </div>
             );
         } else {
-            const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
+            const numberOfRelayers = this.state.relayerInfos.length;
+            const numberOfColumns = Math.min(
+                numberOfRelayers,
+                this._numberOfColumnsForScreenWidth(this.props.screenWidth),
+            );
             return (
                 <GridList
                     cellHeight={CELL_HEIGHT}