Merge pull request #323 from newrelic/jerel/guide-tiles-tweaks

Smaller rows for guide tiles by default
newrelic · Jun 29, 2020 · 0800828 · 0800828
2 parents 5b4a339 + 123b15b
commit 0800828
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/components/GuideListing/GuideListing.module.scss b/src/components/GuideListing/GuideListing.module.scss
@@ -25,7 +25,7 @@
   display: grid;
   grid-template-columns: repeat(3, minmax(260px, 1fr));
   grid-gap: 1rem;
-  grid-auto-rows: minmax(calc(248px - 2rem), auto);
+  grid-auto-rows: minmax(var(--guide-list-row-height, 150px), auto);
   align-items: stretch;
   width: 100%;
 

diff --git a/src/components/GuideTile/GuideTile.module.scss b/src/components/GuideTile/GuideTile.module.scss
@@ -43,6 +43,10 @@
   margin-bottom: 1.5rem;
   color: var(--color-neutrals-600);
   flex: 1;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .button {

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -31,6 +31,7 @@
 }
 
 .guideListing {
+  --guide-list-row-height: auto;
   margin-top: 0;
 }
 
@@ -99,5 +100,4 @@
 
 .allGuidesListing {
   margin-top: 1rem;
-  grid-auto-rows: minmax(180px, 180px);
 }