diff --git a/src/components/AppHighlightAlert/AppHighlightAlert.jsx b/src/components/AppHighlightAlert/AppHighlightAlert.jsx index eec5e479fb..bf677e9645 100644 --- a/src/components/AppHighlightAlert/AppHighlightAlert.jsx +++ b/src/components/AppHighlightAlert/AppHighlightAlert.jsx @@ -61,7 +61,8 @@ const AppHighlightAlert = ({ gridRow: rowIndex, gridColumn: '1 / -1', paddingTop: 0, - paddingBottom: 0 + paddingBottom: 0, + marginBottom: '1.25rem' // to correspond to the margin of SquareAppIcon name in the CSS Grid }} > {
-
+
{getApplicationsList(data)} {shortcuts.map((shortcut, index) => ( diff --git a/src/styles/lists.styl b/src/styles/lists.styl index 118d7be1a3..e206ac86a0 100644 --- a/src/styles/lists.styl +++ b/src/styles/lists.styl @@ -15,16 +15,14 @@ max-width 'calc(%s * 8 + %s * 7 + 4rem)' % (appTileSize appGridGutter) // 8 columns + 7 column gaps + border gaps display grid grid-template-columns repeat(auto-fill, appTileWithGutter) - grid-template-rows rem(91) repeat(auto-fit, rem(91)) // first row is for the divider - grid-auto-rows rem(91) - grid-gap rem(35) 0 + grid-auto-rows minmax(rem(91), auto) + grid-gap rem(10) 0 justify-content center +small-screen() grid-template-columns repeat(auto-fill, mobileTileWithGutter) - grid-template-rows rem(68) repeat(auto-fit, rem(68)) // first row is for the divider - grid-auto-rows rem(68) - grid-gap rem(20) 0 + grid-auto-rows minmax(rem(68), auto) + grid-gap rem(5) 0 .item-grid-icon width rem(16)