feat: Allow long text in AppHighlightAlert

I had to play with margin-bottom on AppHighlightAlert and grid-gap to
counterbalance the removal of auto-fit.

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
       }}
     >
       <span

src/components/Applications.jsx

@@ -77,7 +77,7 @@ export const Applications = ({ onAppsFetched }) => {
     <div className="app-list-wrapper u-m-auto u-w-100">
       <Divider className="u-mv-0" />
 
-      <div className="app-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center">
+      <div className="app-list u-w-100 u-mv-3 u-mt-2-t u-mb-1-t u-mh-auto u-flex-justify-center">
         {getApplicationsList(data)}
 
         {shortcuts.map((shortcut, index) => (

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)